В сегодняшнем уроке мы создадим классическое слайдшоу с использованием другого типа смены слайдов. Структурирование слайдшоу
Первым делом нам необходимо создать структуру. Для правильной работы нам понадобится несколько дополнительных плагинов, а именно 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>
Наши изображения формируют прямоугольник с двумя картинками по вертикали и горизонтали. Нам необходимо, чтобы отображалось только одно изображение за 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 это координация показа слайдов в заданном порядке с указанием правильных координат наших изображений.
Код: Выделить всё
$(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);
}
});
});
Вот наша панель и готово! Всего хорошего! всем удачи!
Перевод урока http://ruseller.com
Источник урока: http://www.buildinternet.com