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

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

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

Иногда, среди текста на странице, хочется поместить плавную смену картинок. Делать такой ротатор изображений с помощью 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>
   
<!-- Автор 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>

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

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


Создать сайт в uKit Нужен классный сайт для бизнеса?
Воспользуйтесь сервисом uKit. Никакого кода!
Гость 2011-07-26 в 16:01 / МатериалСпам
Вот как получилось у меня http://alwow.ru/pages/skript
если нужна помощь обращайтесь в "обсуждение темы"
0
Чтобы оставить комментарий или отзыв под этой публикацией, войдите или зарегистрируйтесь.