Jquery Slideshow своими руками

Введение

В сети неимоверное количество уже готовых слайдшоу, в которые только картинки добавь и наслаждайся тем как они меняются с помощью самой разнообразной анимации. Просматривая их, мне захотелось изобрести этот велосипед самому. Без всяких объемных эффектов и т.п. Самое обычное слайдшоу.

Как это работает

Принцип работы прост: в блок, совпадающий с размерами слайда засовываю блок «подлиннее», в который буду упаковывать изображения, выровненные по левой стороне(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);
	});
});

В заключение

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

И еще раз Демо | Исходник