Введение
В сети неимоверное количество уже готовых слайдшоу, в которые только картинки добавь и наслаждайся тем как они меняются с помощью самой разнообразной анимации. Просматривая их, мне захотелось изобрести этот велосипед самому. Без всяких объемных эффектов и т.п. Самое обычное слайдшоу.
Как это работает
Принцип работы прост: в блок, совпадающий с размерами слайда засовываю блок «подлиннее», в который буду упаковывать изображения, выровненные по левой стороне(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);
});
});
В заключение
Ну вот и все. Вроде бы никаких хитрых манипуляций я не делал. Не ожидал, конечно, что получится в основном код с комментариями, но зато без лишних слов.
Автор: Georgy1
