Пропустить навигацию

Плавная смена изображений

13.03.2007 ,

Очень интересный способ смены изображений при помощи Javascript сегодня обнаружил на сайте textpattern.org.

Итак, сразу к практике и что понадобится (про Texpattern речь не идет, все можно найти в документации к плагину):

  • Несколько изображений (складываем в папку /images/)
  • Следующие скрипты, prototype.lite.js, moo.fx.js, slideshow.js
  • Добавить в наш документ следующие строки между <html> и </html> (не забываем про пути):
    • <script type="text/javascript" src="prototype.lite.js"></script>
    • <script type="text/javascript" src="moo.fx.js"></script>
    • <script type="text/javascript" src="slideshow.js"></script>
  • Там где будет меняться изображение ставим (все изображения складываем в папку /images/):
    <div class="slideshow">
<img id="aro-1a" alt="" 
src="http://yoursite.com/images/17.jpg" 
width="268" height="201" />
</div>
<script type="text/javascript">
<!--//--><![CDATA[//><!--
	new fx.Slideshow
("17.jpg,18.jpg,19.jpg,20.jpg", 
{ hu: "http://yoursite.com/", n: "1"})
//--><!]]>
</script>

Недостатки:

  • Не работает плавная смена изображений в Opera (достаточно резкий переход, как и множество других эффектов при использовании прототипа)
  • При отключенных стилях выведется два меняющихся изображения

Пример в действии

Комментарии

  1. Здравствуйте! Скрипт очень красивый. Но есть проблема в его использовании. Вот пример:
    http://www.protea.ru/biznes1.htm
    В Firefox никак не получается выровнять картинку по центру, да и вообще относительно чего угодно, т.к. она стоит по абсолюту. А в IE она почему-то сдвигается вправо. Посоветуйте, пожалуйста, как можно справиться с этой проблемой? Как поставить блок с меняющимися картинками в то место, которое нужно?

    — Nana Apr 21, 10:03 PM #

  2. Уберите две строки из slideshow1.js:

    div.style.width = a.width + ‘px’;
    div.style.height = a.height + ‘px’;

    — higher Apr 22, 12:17 AM #

  3. а как сделать две таких анимации в разных местах на одной странице?

    — Slava May 10, 10:08 PM #

  4. Здравствуйте!
    Объясните пожалуйста почему у меня появляется только первая картинка, а после того как она исчезает вторая не появляется?..

    — Marie Jun 9, 09:11 PM #

  5. Здравствуйте.
    Как то странно под оперой 9.64 и firefox 3.5 работает, а под internet explorer неработает!

    — Redduck Aug 10, 01:35 PM #

  6. Здравствуйте!
    хороший скрипт
    а можно его применить как бэкграунд – т.е. в фоне дива – не а в стилях – те.е. background-image

    спасибо

    — Ivan Sep 9, 11:13 AM #

  7. Здравствуйте!
    Объясните пожалуйста почему у меня появляется только первая картинка, а после того как она исчезает вторая, третья и т.д. не появляется?..

    — Vladimir Jan 17, 10:49 AM #

  8. Здравствуйте!
    А можно ли что-то сделать, чтобы скрипт стал работать и в explorer?
    Спасибо!

    — Sveta Jan 31, 06:33 PM #

  9. Большое вам спасибо! Пробовал различные флеш-галереи, но тщетно пытался убирать их копирайты и косяки. А тут всё просто и понятно.

    — Роман Apr 1, 08:45 PM #

  10. Галерея отличная! Есть такая сложность: если фотография долго грузится, то происходит резкий скачок на предыдущее изображение, потом на вновь подгруженное и далее. Подскажите, может можно что-то изменить в скрипте, какое-нибудь время предзагрузки увеличить?
    Спасибо.

    — Настя May 3, 03:39 AM #

  11. Отличная смена картина, спасибо большое за описание. Проясните один момент, возможно ли с помощью этого плагина сделать смену картинок случайной?

    — Инокентий Jul 2, 09:36 PM #