Анимированное слайдшоу с помощью jQuery

SLITE

Если есть такое решение которое никогда не выйдет из моды - так это скорее всего слайдшоу с помощью jQuery.

В сегодняшнем уроке мы создадим классическое слайдшоу с использованием другого типа смены слайдов.

Структурирование слайдшоу

Первым делом нам необходимо создать структуру. Для правильной работы нам понадобится несколько дополнительных плагинов, а именно easing для плавных переходов и timing slide changes для смены слайдов по времени.

Наши элементы слайдшоу будут в специально созданном неупорядоченном списке.

Код: Выделить всё

<!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 
Transitional//EN"
"http://www.w3.org/TR/xhtml1/DTD/xhtml1-transitional.dtd">

<html xmlns="http://www.w3.org/1999/xhtml" xml:lang="en" lang="en">
<head>
<meta http-equiv="Content-Type" content="text/html; charset=utf-8"/>
<title>Panning Slideshow | Build Internet Tutorial</title>


<link rel="stylesheet" href="panning-slideshow.css"/>

<script src="http://code.jquery.com/jquery-latest.js"></script>
<script src="js/jquery.easing.1.3.js"></script>
<script src="js/jquery.timer.js"></script>
<script src="image-rotator.js"></script>

</head>


<body>

<div id="window">
<ul id="slideshow">
<li class="box1"><img src="images/tiger.jpg" alt="Tiger"/></li>
<li class="box2"><img src="images/macaw.jpg" alt="Macaw"/></li>
<li class="box3"><img src="images/bald-eagle.jpg" alt="Bald Eagle"/></li>
<li class="box4"><img src="images/panda.jpg" alt="Panda"/></li>
</ul>
</div>
</body>
</html>

CSS

Наши изображения формируют прямоугольник с двумя картинками по вертикали и горизонтали. Нам необходимо, чтобы отображалось только одно изображение за 1 раз и поэтому мы ограничиваем с помощью стилей видимую зону до 960 пикселей по ширине и 350 пикселей по высоте.

Код: Выделить всё

*{margin:0; padding:0;}


body{background:#353637; height:100%;}


#window{clear:both; width:960px; height:350px; background:#131310; 
overflow:hidden; position:relative; margin:10px auto 10px auto;}


#slideshow{width:1920px; height:700px; overflow:hidden; position:relative;}
#slideshow li{width:960px; height:350px; float:left; display:inline;}

jQuery

Главная задача jQuery это координация показа слайдов в заданном порядке с указанием правильных координат наших изображений.

Код: Выделить всё

$(document).ready(function(){


//Это следит за текущем положением слаудшоу
var current_panel = 1;
//Контролируем продолжительность анимации
var animation_duration = 2500;

$.timer(6000, function (timer) {
//Определяем текущее положение и переход к следующему слайду
switch(current_panel){
case 1:
$("#slideshow").stop().animate({left: "-960px", top: "0px"}, {easing: 'easeOutBack', 
duration: animation_duration});
current_panel = 2;
break;
case 2:
$("#slideshow").stop().animate({left: "0px", top: "-350px"}, {easing: 'easeOutBack', 
duration: animation_duration});
current_panel = 3;
break;
case 3:
$("#slideshow").stop().animate({left: "-960px", top: "-350px"}, {easing: 'easeOutBack', 
duration: animation_duration});
current_panel = 4;
break;
case 4:
$("#slideshow").stop().animate({left: "0px", top: "0px"}, {easing: 'easeOutBack', 
duration: animation_duration});
current_panel = 1;
break;
timer.reset(12000);
}
});


});

Код начинается с определения 2-х переменных. Первая (current_panel) будет использоваться для отслеживания текущего положения слайдшоу. Вторая (animation_duration) - продолжительность анимации.

Вот наша панель и готово! Всего хорошего! всем удачи!

Перевод урока http://ruseller.com
Источник урока: http://www.buildinternet.com