Введение
В сети неимоверное количество уже готовых слайдшоу, в которые только картинки добавь и наслаждайся тем как они меняются с помощью самой разнообразной анимации. Просматривая их, мне захотелось изобрести этот велосипед самому. Без всяких объемных эффектов и т.п. Самое обычное слайдшоу.
Как это работает
Принцип работы прост: в блок, совпадающий с размерами слайда засовываю блок «подлиннее», в который буду упаковывать изображения, выровненные по левой стороне(float:left), и у которого будет плавно меняться левый отступ(margin-left) благодаря jquery функции animate.
Пример
Вот Демо.
Реализация
Я выбрал размеры слайдов 371x199px.
Для начала напишем HTML и CSS, от которых будем в дальнейшем опираться:
<div id="slideshow"> <div id="slideimages"> <img class="slideimage" src="/img/slides/0.jpg" id="1" data-title="Первый слайд"> <img class="slideimage" src="/img/slides/1.jpg" id="2" data-title="Второй слайд"> </div> <div id="controlrow"> <span id="slidecounter"></span> <!--Номер показываемого слайда--> <div id="slidetitle"></div> <!--Название слайда--> <div id="slidecontrollers"> <div class="imtype" id="rew"></div> <!--Кнопка назад--> <div class="imtype pause" id="play-pause"></div> <!--Автопрокрутка запуск/стоп--> <div class="imtype" id="few"></div> <!--Кнопка вперед--> </div> </div> </div>
#slideshow { position:relative; /*Чтобы позиционировать абсолютно div#slidecontrollers*/ overflow:hidden; /*Чтобы полосы прокрутки не появлялись от более длинного div#slideimages*/ width:371px; /*Дизайн*/ height:199px; font-size:0; } #controlrow { position:absolute; /*Чтобы поверх слайдов был*/ z-index:2; /*Чтобы поверх слайдов был*/ bottom:8px; /*Дизайн*/ width:371px; opacity:0; /*Чтобы не мешалась, сначала будет скрыта*/ filter:alpha(opacity=0); /*Очень не хочется, но забывать нельзя про них*/ background: url('images/slidermenu.png') repeat-x; /*Дизайн*/ border-top: 1px solid rgba(255, 255, 255, 0.35); border-bottom: 1px solid rgba(255, 255, 255, 0.1); } #slidecounter { float:left; /*Выравнивание по левому краю*/ margin: 5px 9px; /*Дизайн*/ color: #727272; text-shadow: 0 0 1px #727272; font-size: 23px; } #slidetitle { float:left; /*Выравнивание по левому краю*/ margin:11px 0; /*Дизайн*/ overflow:hidden; font-size:14px; color:#e5e5e5; } .slideimage { width:371px; /*Дизайн*/ float:left; /*Выравнивание по правому краю*/ } #slidecontrollers { float:right; /*Выравнивание по правому краю*/ width:57px; /*Дизайн*/ height:20px; box-shadow:0 1px 0 rgba(255,255,255,0.16), inset 0 2px 3px rgba(0,0,0,0.6); -webkit-box-shadow:0 1px 0 rgba(255,255,255,0.16), inset 0 2px 3px rgba(0,0,0,0.6); -moz-box-shadow:0 1px 0 rgba(255,255,255,0.16), inset 0 2px 3px rgba(0,0,0,0.6); border-radius:3px; -webkit-border-radius:3px; -moz-border-radius:3px; background:#222 url('images/slidecontrol_bg.png') repeat-x; margin:6px 9px 4px; text-align:center; padding:4px; } .imtype { display:inline-block; /*Кнопки сделаем инлайн элементами, но в то же время оставим блочными*/ width:13px; /*Дизайн*/ height:20px; background-repeat:no-repeat; background-position:center; cursor:pointer; } #rew { background-image:url('images/rew.png'); /*Назад прокрутка*/ } #few { background-image:url('images/few.png'); /*Вперед прокрутка*/ } .play { background-image:url('images/play.png'); /*Начать автопрокрутку*/ } .pause { background-image:url('images/pause.png'); /*Остановить автопрокрутку*/ } #play-pause { margin:0 8px; /*Дизайн*/ }
Приступим к самому интересному: заставим это все двигаться.
Для начала создадим переменные:
var start_num=1; //Номер первого слайда при загрузке страницы var auto_few=1; //Автопрокрутка включена(1) или выключена(0) по умолчанию var slidespeed=200; //Время перехода от слайда к слайду(мсек) var intervalspeed=3000; //интервал автопрокрутки(мсек) var num; //Количество слайдов будет тут. Но его мы запишем, когда полностью загрузим документ var i = start_num; //В будущем будем хранить в i показываемый слайд var intervalID; //Интервал для автопрокрутки var lock = 0; //Не даем прокрутить сразу на несколько слайдов, чтобы не сбивалось
Напишем функцию смены названия слайда:
function change_title() { $('#slidecounter').html(i + '/' + num); //обновление счетчика var title = $('img.slideimage#'+i).attr('data-title'); //Получим название слайда $('#slidetitle').html(title); //Добавим название слайда }
Теперь напишем функции прокрутки вперед и назад.
function few() { //Прокрутка вперед if(lock == 0) { //Не даем пройти нажатие во время анимации if(i>=num) { //Проверим не уходит ли в пустоту слайдшоу, если нет, то просто сдвинем на длину слайда(то есть 371px), если же да, то тогда вернемся к первому слайду $('#slideimages').animate({'margin-left':'0'},slidespeed,function(){lock=0}); i = 1; } else { $('#slideimages').animate({'margin-left': parseInt($('#slideimages').css('margin-left')) - 371 + 'px'},slidespeed,function(){lock=0}); i++; } } lock = 1; change_title(); } function rew() { if(lock == 0) { if(i<=1) { $('#slideimages').animate({'margin-left': parseInt($('#slideimages').css('margin-left')) - 371*(num-1) + 'px'},slidespeed,function(){lock=0}); i = num; } else { $('#slideimages').animate({'margin-left': parseInt($('#slideimages').css('margin-left')) + 371 + 'px'},slidespeed,function(){lock=0}); i--; } } lock = 1; change_title(); }
Теперь же добавим функцию для play/pause кнопки
function play_pause() { if(auto_few == 0) { //Выключена автопрокрутка? auto_few = 1; //Если да, то включим ее $('#play-pause').removeClass('play').addClass('pause'); //Поменяем иконку few(); //Прокрутим один раз intervalID = setInterval(autofew, intervalspeed); //Зададим инетрвал } else { auto_few = 0; //Если нет, то выключим $('#play-pause').removeClass('pause').addClass('play'); //Поменяем иконку clearInterval(intervalID); //Отключим интервал } }
Функция начала/остановки автопрокрутки. Они нам еще понадобятся:
function stop_auto_few() { //Даже комментарии излишни(см. выше) if(auto_few == 1) { auto_few = 0; $('#play-pause').removeClass('pause').addClass('play'); clearInterval(intervalID); } } function autofew() { if(auto_few == 1) { few(); } }
Вот теперь самое главное. Что происходит, когда страница подгружена?
$(document).ready(function() { num = $('.slideimage').length; $('#slideimages').css({'width': 371*num + 'px','margin-left': (-371)*(start_num-1) + 'px'}); //задаем блоку со слайдами длину и сдвинем к первому показываемому элементу change_title(); //Зададим значение названию слайда if(auto_few == 0) { //Если автопрокрутка выключена, то изменим иконку $('#play-pause').removeClass('pause').addClass('play'); } else { //если нет, то зададим интервал intervalID = setInterval(autofew, intervalspeed); } $('#few').click(function() { //сделаем же наконец кнопки кнопками few(); //Функция прокрутки вперед stop_auto_few(); //Если мы начали прокручивать "ручками", то автопрокрутка нам ни к чему }); $('#rew').click(function() { rew(); stop_auto_few(); }); $('#play-pause').click(function() { play_pause(); }); $('#slideshow').mouseenter(function() { //Появление строчки с информацией $('#controlrow').stop().animate({'opacity':'1.0','filter': 'alpha(opacity=100)'},100); }).mouseleave(function() { $('#controlrow').stop().animate({'opacity':'0.0','filter': 'alpha(opacity=0)'},500); }); });
В заключение
Ну вот и все. Вроде бы никаких хитрых манипуляций я не делал. Не ожидал, конечно, что получится в основном код с комментариями, но зато без лишних слов.
И еще раз Демо | Исходник
