Плавная смена картинок на JQuery

92010-12-24157981Денис Абдуллин

Иногда, среди текста на странице, хочется поместить плавную смену картинок. Делать такой ротатор изображений с помощью GIF или Flash муторное дело, и при необходимости заменить один кадр, приходится изменять всю анимацию, поэтому выходным положением является JavaScript, а если заглянуть глубже – JQuery.

Здесь будет рассмотрен самый простейший скрипт JQuery без дополнительных плагинов.

Стоит заметить:

Последовательная смена изображений с ссылками на них.
Минимальный размер кода.
В итоге мы получим плавную смену заранее заданного списка изображений с эффектом растворения.

Code

<!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>


<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>

Посмотреть пример.

Я считаю, это очень удобный скрипт, поэтому всем стоит посмотреть как он построен. Обязательно пригодится!

Демо страница

Скачать

Создать сайт в uKit Нужен классный сайт для бизнеса?
Воспользуйтесь сервисом uKit. Никакого кода!

Порядок вывода комментариев: