Слайдшоу-галерея на jQuery на примере
Галерея слайдшоу представляет собой листалку картинок, а также список ссылок с цифрами на картинки.
HTML:
<!DOCTYPE html> <html> <head> <script src="http://code.jquery.com/jquery-latest.js"></script> <script type="text/javascript" src="js/slideshow.js"></script> <link rel="stylesheet" type="text/css" href="css/slideshow.css"> </head> <body> <div class="b-slideshow"> <div class="b-slideshow-area"> <div class="b-slideshow-list"> <div class="b-slideshow-item"> <img src="img/slide1.jpg" alt="" /> </div> <div class="b-slideshow-item"> <img src="img/slide2.jpg" alt="" /> </div> <div class="b-slideshow-item"> <img src="img/slide3.jpg" alt="" /> </div> <div class="b-slideshow-item"> <img src="img/slide4.jpg" alt="" /> </div> <div class="b-slideshow-item"> <img src="img/slide5.jpg" alt="" /> </div> <div class="b-slideshow-item"> <img src="img/slide6.jpg" alt="" /> </div> </div> </div> <div class="b-slideshow-leftarr"></div> <div class="b-slideshow-rightarr"></div> </div> </body> </html>
CSS:
* {
margin: 0;
padding: 0;
}
body {
padding: 20px;
}
.b-slideshow {
height: 480px;
width: 640px;
margin: 0 auto;
position: relative;
}
.b-slideshow-area {
width: 640px;
height: 480px;
overflow: hidden;
}
.b-slideshow-list {
position: relative;
left: 0;
width: 100000px;
letter-spacing: -0.25em;
}
.b-slideshow-item {
display: inline-block;
//display: inline;
//zoom:1;
width: 640px;
height: 480px;
}
.b-slider-nav {
text-align: right;
position: absolute;
right: 10px;
bottom: 10px;
}
.b-slider-nav li {
display: inline-block;
//display: inline;
//zoom:1;
}
.b-slider-nav li a {
display: inline-block;
//display: inline;
//zoom:1;
width: 23px;
height: 20px;
font: normal 12px/20px arial;
background: #fff;
text-align: center;
color: #000;
text-decoration: none;
margin-left: 3px;
}
.b-slider-nav li.active a {
color: #fff;
background: #900;
}
.b-slider-nav li a:hover {
color: #fff;
background: #c00;
}
.b-slideshow-leftarr {
width: 47px;
height: 49px;
position: absolute;
left: 29px;
top: 220px;
background: url("../img/arr_l.png");
cursor: pointer;
}
.b-slideshow-rightarr {
width: 46px;
height: 47px;
position: absolute;
right: 29px;
top: 220px;
background: url("../img/arr_r.png");
cursor: pointer;
}
Javascript, jQuery:
$(document).ready(function() {
var slidesNumber = $(".b-slideshow-item").size(); // определяем количество слайдов
var slideWidth = $(".b-slideshow-item").eq(1).width(); // определяем ширину одного слайда
$(".b-slideshow-list").after('<ul class="b-slider-nav"></ul>'); // создаём блок списка ссылок на слайды
var navCont = $(".b-slider-nav").html();
//заполняем список ссылками на каждый слайд:
for(var i=1; i<=slidesNumber; i++){
$(".b-slider-nav").html(navCont+'<li><a href="#">'+i+'</a></li>');
navCont = $(".b-slider-nav").html();
};
$(".b-slider-nav li").eq(0).addClass("active"); // делаем активной ссылку на первый слайд
var activeSlide = 1;
$(".b-slider-nav li").click(function(){ // при клике на элемент списка слайдов
$(".b-slider-nav li").removeClass("active"); // убираем класс active у всех элементов
$(this).addClass("active"); // добавляем класс active к элементу, на который кликнул пользователь
var clickedSlide = $(this).index()+1; // в переменную clickedSlide записываем порядковый номер кликнутой ссылки
$(".b-slideshow-list").animate({
left: -slideWidth*(clickedSlide-1)+"px" // производим анимацию: перемещаем набор слайдов так, чтобы в видимой области появился слайд с номером, соответствующим номеру ссылки, на которую кликнул пользователь
}, 800); // анимация будет длиться 800 милисекунд
activeSlide = $(".b-slider-nav li.active").index()+1; // в переменную activeSlide записываем порядковый номер выбранного слайда
});
$(".b-slideshow-rightarr").click(function(){ // при клике на правую стрелку
if(activeSlide<slidesNumber){ // если номер активного слайда меньше общего количества слайдов
$(".b-slideshow-list").animate({
left: "-=0"+slideWidth+"px" // показываем следующий слайд
}, 800);
activeSlide++; // делаем следующий слайд активным
$(".b-slider-nav li").removeClass("active");
$(".b-slider-nav li").eq(activeSlide-1).addClass("active"); // делаем активной следующую ссылку
}
else { // если номер активного слайда не меньше общего количества слайдов
$(".b-slideshow-list").animate({
left: "0px" // перелистываем слайдшоу в начало, к первому слайду
}, 800);
$(".b-slider-nav li").removeClass("active");
$(".b-slider-nav li").eq(0).addClass("active"); // делаем активным первый слайд
activeSlide = $(".b-slider-nav li.active").index()+1; // делаем активной первую ссылку
}
});
$(".b-slideshow-leftarr").click(function(){ // при клике на левую стрелку
if(activeSlide>1){ // если номер активного слайда больше единицы
$(".b-slideshow-list").animate({
left: "+=0"+slideWidth+"px" // пролистываем к предыдущему слайду
}, 800);
activeSlide--; // делаем предыдущий слайд активным
$(".b-slider-nav li").removeClass("active");
$(".b-slider-nav li").eq(activeSlide-1).addClass("active"); // делаем активной предыдущую ссылку
}
else {
$(".b-slideshow-list").animate({
left: -slideWidth*(slidesNumber-1)+"px" // перелистываем всё слайдшоу в конец, к последнему слайду
}, 800);
$(".b-slider-nav li").removeClass("active");
$(".b-slider-nav li").eq(-1).addClass("active"); // делаем активным последний слайд
activeSlide = $(".b-slider-nav li.active").index()+1; // делаем активной последнюю ссылку
}
});
});
Слайдшоу на jQuery с автопрокруткой
В примере выше управление нашей галереей было полностью под контролем пользователя, который мог листать слайдшоу с помощью кнопок влево-вправо, а также с помощью кнопок пагинации. Но как сделать слайдшоу автоматическим, сохранив при этом возможность управления вручную, а также возможность остановить автопрокрутку и при необходимости начать её снова? Для этого нужно немного видоизменить наш плагин.
Сперва добавим кнопку stop-play в конец div-а с классом b-slideshow-area:
<div class="b-slideshow-playstop">Stop</div>
Затем внесем некоторые корректировки в CSS файл. Добавим стили для кнопки play-stop
.b-slideshow-playstop {
width: 60px;
height: 20px;
font: normal 12px/20px arial;
background: #fff;
text-align: center;
color: #000;
position: absolute;
right: 10px;
bottom: 10px;
cursor: pointer;
}
.b-slideshow-playstop:hover {
color: #fff;
background: #c00;
}
.b-slideshow-playstop-active {
color: #fff;
background: #900;
}
А также немного сместим пагинацию:
.b-slider-nav {
text-align: right;
position: absolute;
right: 90px;
bottom: 10px;
}
Теперь осталось просто добавить этот код в наш jQuery файл:
setInterval(function () { // будем повторять функцию с некоторым интервалом времени
if (pause==false) { // если значение переменной pause равно false
if (activeSlide>slidesNumber-1){ // если индекс активного слайда больше общего числа слайдов
$(".b-slideshow-list").animate({
left: "0px" // листаем всё к первому слайду
}, 800);
activeSlide=1; // делаем первый слайд активным
$(".b-slider-nav li").removeClass("active"); // убираем у всех кнопок пагинации класс active
$(".b-slider-nav li").eq(activeSlide-1).addClass("active"); // добавляем класс active первому элементу пагинации
}
else { // если индекс активного слайда меньше их общего числа
activeSlide++; // делаем активным следующий слайд
$(".b-slideshow-list").animate({
left: "-=0"+slideWidth+"px" // пролистываем галерею к следующему слайду
}, 800);
$(".b-slider-nav li").removeClass("active");
$(".b-slider-nav li").eq(activeSlide-1).addClass("active"); // добавляем следующему слайду класс active
}
}
}, 3000); // интервал времени равен трем секундам
В итоге мы добавили фунцию автопрокрутки. Тем не менее, это ещё не всё. Сделаем возможность произвольно останавливать и начинать автоматическую прокрутку слайдшоу:
$(".b-slideshow-playstop").toggle( // при клике поочередно выполняем одну из функций
function(){
pause=true; // останавливаем анимацию
$(this).addClass("b-slideshow-playstop-active");
$(this).text("Play"); // изменяем текст кнопки на play
},
function(){
pause=false; // запускаем анимацию
$(this).removeClass("b-slideshow-playstop-active");
$(this).text("Stop"); // изменяем текст кнопки на stop
}
);
И, наконец, последний штрих. Чтобы исключить случаи, когда пользователь с помощью пагинации или кнопок перешел на слайд, и он тут же пролистался ещё куда-то автоматически, вставляем следующий код на каждое из уже имеющихся событий .click():
pause=true; // запрещаем анимацию
setTimeout(function () {
pause=false; // разрешаем анимацию
}, 7000); // через 7 секунд после клика на один из элементов управления
Посмотреть демо слайдшоу с автопрокруткой >>
Поделиться ссылочкой: