Плавная смена картинок на 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> <div style="text-align: center;">Текстовый блок</div> <div><img src="3.jpg" alt="" /></div> </div> |
Вы забыли упомянуть что можно сделать на каждую картинку отдельную ссылку!
@КолоБок
В статье описано что можно вставлять любое содержимое в блок (кстати, ссылки в том числе)
Если есть выпадающее меню, то картинки его перекрывают. z-index не помогает в IE
спасибо
А вот и баг) Если вставлять ссылки на картинки. то работать будет только одна — верхняя. то что внизу картинка отображается, но ссылка работает та, которая невидима на данный момент, т.е. принадлежит начальной картинки ((((
Вернее не первой картинки, а последнего ДИВА.
что должно быть в начале javascript кода. появился только слова «текстовый документ».
Кто то разобрался как ссылку крутить?
шлак, пару картинок показал и перестал
к томуже позиция абсолют это вообще не вариант