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

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

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, 11:03 PM #

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

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

    — higher Apr 22, 01:17 AM #

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

    — Slava May 10, 11:08 PM #

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

    — Marie Jun 9, 10:11 PM #

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

    — Redduck Aug 10, 02:35 PM #

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

    спасибо

    — Ivan Sep 9, 12:13 PM #