Плавная смена картинок на JavaScript с помощью JQuery

Простой скрипт для плавной смены картинок на Javascript с использованием библиотеки jquery. Кстати, скрипт можно использовать не только для картинок, но и для плавной красивой замены любого содержимого на web-странице:

Для начала демо можно посмотреть здесь

 

Итак, как это делается?

Код представлен ниже:

JavaScript

<script src="jquery-1.4.4.min.js" type="text/javascript"></script><script type="text/javascript">// <![CDATA[
function theRotator() { $('div#rotator div').css({opacity: 0.0}); $('div#rotator div:first').css({opacity: 1.0}); setInterval('rotate()',2000); } function rotate() { var current = ($('div#rotator div.show')? $('div#rotator div.show') : $('div#rotator div:first')); var next = ((current.next().length) ? ((current.next().hasClass('show')) ? $('div#rotator div:first') :current.next()) : $('div#rotator div:first')); next.css({opacity: 0.0}) .addClass('show') .animate({opacity: 1.0}, 1000); current.animate({opacity: 0.0}, 1000) .removeClass('show'); }; $(document).ready(function() { theRotator(); });
// ]]></script>

HTML:

<div id="rotator">
<div class="show"><img src="1.jpg" alt="" /></div>
<div><img src="2.jpg" alt="" /></div>
&nbsp;
<div style="text-align: center;">Текстовый
блок</div>
<div><img src="3.jpg" alt="" /></div>
</div>

Комментарии

10 комментариев

  • Вы забыли упомянуть что можно сделать на каждую картинку отдельную ссылку!

  • Если есть выпадающее меню, то картинки его перекрывают. z-index не помогает в IE

  • А вот и баг) Если вставлять ссылки на картинки. то работать будет только одна — верхняя. то что внизу картинка отображается, но ссылка работает та, которая невидима на данный момент, т.е. принадлежит начальной картинки ((((

  • Сергей :
    А вот и баг) Если вставлять ссылки на картинки. то работать будет только одна – верхняя. то что внизу картинка отображается, но ссылка работает та, которая невидима на данный момент, т.е. принадлежит начальной картинки ((((

    Вернее не первой картинки, а последнего ДИВА.

  • что должно быть в начале javascript кода. появился только слова «текстовый документ».

Добавить комментарий

Ваш e-mail не будет опубликован.

Sidebar