В итоге мы получим плавную смену заранее заданного списка изображений с эффектом растворения.
<!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Strict//EN" "http://www.w3.org/TR/xhtml1/DTD/xhtml1-strict.dtd"> <html xmlns="http://www.w3.org/1999/xhtml"> <head> <meta http-equiv="Content-Type" content="text/html; charset=utf-8" /> <title>Простая замена картинок с помощью JQuery</title> <style type="text/css"> div#rotator {position:relative; height:150px; margin-left: 15px;} div#rotator ul li {float:left; position:absolute; list-style: none;} div#rotator ul li.show {z-index:500;} </style> <script type="text/javascript" src="http://code.jquery.com/jquery-latest.min.js"></script> <!-- Автор Dylan Wagstaff, http://www.alohatechsupport.net --> <script type="text/javascript"> function theRotator() { // Устанавливаем прозрачность всех картинок в 0 $('div#rotator ul li').css({opacity: 0.0}); // Берем первую картинку и показываем ее (по пути включаем полную видимость) $('div#rotator ul li:first').css({opacity: 1.0}); // Вызываем функцию rotate для запуска слайдшоу, 5000 = смена картинок происходит раз в 5 секунд setInterval('rotate()',5000); } function rotate() { // Берем первую картинку var current = ($('div#rotator ul li.show')? $('div#rotator ul li.show') : $('div#rotator ul li:first')); // Берем следующую картинку, когда дойдем до последней начинаем с начала var next = ((current.next().length) ? ((current.next().hasClass('show')) ? $('div#rotator ul li:first') :current.next()) : $('div#rotator ul li:first')); // Расскомментируйте, чтобы показвать картинки в случайном порядке // var sibs = current.siblings(); // var rndNum = Math.floor(Math.random() * sibs.length ); // var next = $( sibs[ rndNum ] ); // Подключаем эффект растворения/затухания для показа картинок, css-класс show имеет больший z-index 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> </head> <body> <div id="rotator"> <ul> <li class="show"><a href="http://google.ru/"><img src="images/image-1.jpg"width="500" height="313" alt="pic1" /></a></li> <li><a href="http://yandex.ru/"><img src="images/image-2.jpg" width="500"height="313" alt="pic2" /></a></li> <li><a href="http://nigma.ru/"><img src="images/image-3.jpg" width="500"height="313" alt="pic3" /></a></li> </ul> </div> </body> </html> взято с http://wmdn.ru/javascript/smooth-changing-rotate-images-script-on-jquery
