Создаем простой слайдер для сайта типа iTunes

Дата публикации: 2010-03-23

jQuery

От Автора: Когда в особой цене пространство, использование слайдеров — оптимальный способ передачи информации. Сегодня мы посмотрим, как создать простой слайдер для сайта, аналогичный использующемуся в iTunes store.

Разработчики часто стремятся к функциональности, обеспечиваемой слайдерами, для того, чтобы вместить максимум информации в предусмотренное пространство. И создание такого слайдера не так трудно, как вы могли подумать. Немного спланировав и поэкспериментировав, вы сможете довольно быстро создать себе простой слайдер.

Перед тем, как мы приступим к практическим шагам, я Вам рекомендую просмотреть демо-результат работы.

jQuery

Заинтересованы? Давайте начнем прямо сейчас!

Цели проекта

До начала кодирования определим задачи для этого виджета.

Сводить к минимуму пространство, занимаемое изображениями, делая величину слайд-шоу такой же, как размер отдельного изображения, а затем постепенно изменяясь между ними.

Реализовать сбоку вертикальную карусель изображений, показывающую предстоящие изображения.

Обеспечивать способ передвижения карусели и слайд-шоу вперед вручную. В этом случае мы воспользуемся единственным простым элементом привязки.

В карусели самое верхнее изображение – следующее на очереди, оно будет демонстрироваться при щелчке на клавишу next.

Минимизировать использование DOM в той степени, в какой это возможно. Нельзя сказать, чтобы мы совсем не собирались трогать DOM, просто не станем заниматься DOM’ом слишком много.

План действий

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

Если сомневаешься, используй грубую силу.

Шаг 1: Установите CSS для контейнера галереи изображений так, чтобы все основные изображения свернулись до размера одного изображения. Чуть ниже я объясню этот момент.

Шаг 2: Установите CSS для контейнера уменьшенных изображений (карусели) так, чтобы одновременно были видны всего три изображения.

Шаг 3: Пройдитесь по циклу images и установите класс с числовым индексом для каждого уменьшенного и основного изображения, чтобы независимо идентифицировать каждое. Например, каждое изображение получает класс thumb-xx, где xx – это номер.

Шаг 4: При нажатии клавиши next сдвиньте карусель на одно уменьшенное изображение вверх, а затем покажите изображение, соответствующее уменьшенному.

Это – основные шаги, нужные для создания такого эффекта. Я объясню детально каждый шаг по мере продвижения вперед.

Шаг 1: Основная разметка

Разметка HTML для демо-страницы выглядит так:

<!DOCTYPE html>
<html lang="en-GB">
	<head>
		<title>iTunes slider</title>
		<link rel="stylesheet" href="style.css" type="text/css" />
	</head>

	<body>
    	<div id="container">
        	<h1>Create a simple iTunes-esque slider with jQuery</h1>
		<div>by Siddharth for the lovely folks at Net Tuts</div>
		<p>A simple slider/slideshow which mostly emulates the one on iTunes barring a few changes. Click the down button to cycle the images.</p> 

		<div id="gallery">
    		   
    		   
    		   
    		   
            	   
            	   
	        </div>

                <div id="thumbs">
    	   	   
    		   
    		   
    		   
            	   
            	   
	        </div>

        	<a href="#" id="next"></a>
        </div>

	<script type="text/javascript" src="js/jquery.js"></script>
	<script type="text/javascript" src="js/mocha.js"></script>

	</body>
</html>

<!DOCTYPE html>

<head>

<title>iTunes slider</title>

</head>

<body>

<h1>Create a simple iTunes-esque slider with jQuery</h1>

<div>by Siddharth for the lovely folks at Net Tuts</div>

<p>A simple slider/slideshow which mostly emulates the one on iTunes barring a few changes. Click the down button to cycle the images.</p>

</div>

</div>

</div>

</body>

</html>

Игнорируя несущественный код, у нас есть два контейнера элементов с изображениями: один для изображений основной галереи, второй – для уменьшенных. Каждому из них я присвоил ID, так что к ним можно легко получить доступ из JavaScript. Мы также включаем элемент привязки, который действует как клавиша next.

В конце мы включаем библиотеку jQuery и наш собственный файл сценария.

К концу этой стадии наша демо-страница выглядит просто набором изображений.

jQuery

Шаг 2: Оформление CSS

*{
	margin: 0;
	padding: 0;
	border: 0 none;
	outline: 0;
}

body{
	font-family: "Lucida Grande", "Verdana", sans-serif;
	font-size: 12px;
}

p{
	margin: 20px 0 40px 0;
}

h1{
	font-size: 30px;
	font-family: "Myriad Pro", "Lucida Grande", "Verdana", sans-serif;
	padding: 0;
	margin: 0;
}

h2{
	font-size: 20px;
}

#container{
	width: 900px;
	margin-left: auto;
	margin-right: auto;
	padding: 50px 0 0 0;
	position: relative;
}

img{
	display: block;
}

#gallery, #thumbs{
	float: left;
}

#gallery{
	width: 800px;
	height: 300px;
	overflow: hidden;
}

#gallery img{
	position: absolute;
}

#thumbs{
	width: 100px;
	height: 300px;
	overflow: hidden;
}

#next{
	display: block;
	width: 47px;
	height: 43px;
	background: url(img/arrow.png);
	position: relative;
	top: 257px;
	left: 855px;
}

#next:hover{
	background: url(img/arrowmo.png);
}

.clear{
	clear: both;
}

margin: 0;

padding: 0;

border: 0 none;

outline: 0;

}

body{

font-family: "Lucida Grande", "Verdana", sans-serif;

font-size: 12px;

}

margin: 20px 0 40px 0;

}

h1{

font-size: 30px;

font-family: "Myriad Pro", "Lucida Grande", "Verdana", sans-serif;

padding: 0;

margin: 0;

}

h2{

font-size: 20px;

}

#container{

width: 900px;

margin-left: auto;

margin-right: auto;

padding: 50px 0 0 0;

position: relative;

}

img{

display: block;

}

#gallery, #thumbs{

float: left;

}

#gallery{

width: 800px;

height: 300px;

overflow: hidden;

}

#gallery img{

position: absolute;

}

#thumbs{

width: 100px;

height: 300px;

overflow: hidden;

}

#next{

display: block;

width: 47px;

height: 43px;

background: url(img/arrow.png);

position: relative;

top: 257px;

left: 855px;

}

#next:hover{

background: url(img/arrowmo.png);

}

.clear{

clear: both;

}

CSS выглядит очевидным, но я хочу, чтобы вы обратили внимание на несколько моментов:

Во-первых, заметьте, что я применил position: absolute to #gallery img. Это гарантирует нам, что изображения накладываются сверху друг на друга, а не следуют одно за другим. Таким образом, позже мы сможем управлять их непрозрачностью для того, чтобы решить, какое изображение показывать.

Во-вторых, обратите внимание, что высота элемента thumbs установлена на 300px. Это потому, что в демо каждое уменьшенное изображение имеет высоту 100px и я хочу, чтобы карусель показывала сразу по три изображения. Собственно, для своей личной реализации можете увеличить высоту этого элемента в зависимости от количества уменьшенных изображений, которые хотите показывать одновременно.

Также заметьте тот факт, что мы установили свойство overflow на hidden для того, чтобы удостовериться, что одновременно показывается не более трех уменьшенных изображения.

После того, как мы определили стиль нашему слайдеру, он выглядит так, как показано на изображении внизу. Обратите внимание, что почти все уже находится на своем месте. Последнее изображение находится сверху и, таким образом, видимо.

jQuery

Шаг 3: Реализация JavaScript

Теперь, когда у нас уже имеется базовая структура, и присутствуют основные стили, мы можем начать кодировать необходимую функциональность. Заметьте, что далее мы будем широко использовать jQuery. Не стесняйтесь использовать ссылки на Google CDN (Google Content Distribution Network – сеть дистрибьюции ПО), если необходимо.

Нахождение элементов и их подготовка

Сначала нам нужно получить изображения и соответствующие им уменьшенные копии для того, чтобы было можно их обработать.

var images = $("#gallery img");
var thumbs = $("#thumbs img");
       var index = 0;

var images = $("#gallery img");

var thumbs = $("#thumbs img");

var index = 0;

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

for (i=0; i<thumbs.length; i++)
{
	$(thumbs<em></em>).addClass("thumb-"+i);
	$(images<em></em>).addClass("image-"+i);
}

for (i=0; i<thumbs.length; i++)

{

$(thumbs<em></em>).addClass("thumb-"+i);

$(images<em></em>).addClass("image-"+i);

}

Далее мы просто производим итерацию (перебор) по элементам обоих списков и добавляем к каждому элементу класс thumb-xx или image-xx, где xx – это номер. Это позволяет нам смотреть на каждое отдельное уменьшенное или основное изображение независимо.

Навешиваем обработчик

Теперь нам нужно создать обработчик событий и прикрепить его к клавише next так, чтобы мы могли что-то сделать, когда на клавишу нажимают.

$("#next").click(sift);

1	$("#next").click(sift);

Это делается одной строкой. По существу, мы назначаем вызывать функцию sift каждый раз, когда нажимается клавиша next.

function sift()
	{
		if (index<(thumbs.length-1)) {index+=1 ; }
		else {index=0}
		show (index);
	}

function sift()

{

if (index<(thumbs.length-1)) {index+=1 ; }

else {index=0}

show (index);

}

На самом деле, это очень простой обработчик событий. Мы просто проверяем, какой элемент в данный момент выбран. Если это последний элемент, мы вновь устанавливаем указатель так, чтобы карусель возвращалась к первому элементу, создавая, таким образом, псевдобесконечную последовательность. Иначе, мы увеличиваем index на 1.

Далее, мы вызываем функцию show, указывая переменную index, как параметр. Еще чуть-чуть, и мы создадим все что нужно.

Шаг 4: Реализация основной логики

function show(num)
	{
		images.fadeOut(400);
		$(".image-"+num).stop().fadeIn(400);
		var scrollPos = (num+1)*imgHeight;
		$("#thumbs").stop().animate({scrollTop: scrollPos}, 400);
	}

function show(num)

{

images.fadeOut(400);

$(".image-"+num).stop().fadeIn(400);

var scrollPos = (num+1)*imgHeight;

$("#thumbs").stop().animate({scrollTop: scrollPos}, 400);

}

Функция show реализует в этом виджете основную функциональность. Позвольте мне объяснить каждый компонент.

Во-первых, мы плавно уменьшаем прозрачность каждого изображения, содержащегося в элементе gallery. Далее мы плавно увеличиваем прозрачность (проявляем) только нужное изображение, используя его класс. Так как к каждому изображению есть доступ при помощи его класса и мы имеем позиционной указатель изображения, то просто используем следующий селектор (jQuery): “.image-”+num

Затем нам нужно скроллировать содержимое элемента thumbnail таким образом, чтобы нужное изображение было наверху карусели. Это можно проделать двумя способами.

Первый способ использует свойство jQuery position. Оно позволяет определить позицию элемента относительно его родительского элемента. К несчастью, здесь я наткнулся на некоторые проблемы с его работой в броузере Chrome, что означает, что нам придется использовать второй способ.

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

var imgHeight = thumbs.attr("height");

1	var imgHeight = thumbs.attr("height");

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

var scrollPos = (num+1)*imgHeight

1	var scrollPos = (num+1)*imgHeight

Теперь мы рассчитываем смещение нужного нам уменьшенного изображения. Так как нам необходимо уменьшенное изображение следующего элемента в списке, а не само изображение, мы увеличиваем его индекс на 1 перед умножением на высоту.

Теперь при помощи этой информации мы можем скроллировать элемент на необходимую нам высоту.

$("#thumbs").stop().animate({scrollTop: scrollPos}, 400);

1	$("#thumbs").stop().animate({scrollTop: scrollPos}, 400);

Мы пользуемся анимационными возможностями jQuery, чтобы изменить свойство scrollTop до того значения, которое мы вычислили выше. По существу, мы прокручиваем элемент на x пикселей сверху, чтобы создать эффект карусели.

Шаг 5: Некоторая подстройка

Наведем глянец на эффект псевдобесконечности

Мы практически закончили, но еще чуть-чуть кода все-таки отполируем.

thumbs.slice(0,3).clone().appendTo("#thumbs");

1	thumbs.slice(0,3).clone().appendTo("#thumbs");

Эта строка, по существу, берет три первых уменьшенных изображения и копирует их в конец списка. Метод slice выбирает три первых элемента, метод clone клонирует эти элементы DOM и, наконец, метод appendTo добавляет их в выбранный элемент.

Мы не можем просто так использовать для appendTo отрезок из выбранных трех элементов, пока они находятся на своих местах, что поместить их, куда требуется. Сначала нам нужно их скопировать методом clone.

Мы это делаем для того, чтобы визуально иллюзия бесконечной карусели сохранялась, когда мы достигаем последних уменьшенных изображений. В противном случае, пользователь будет видеть пустые блоки, а это совсем не то, что нужно.

Заставим карусель автоматически вращаться

Заставить этот виджет автоматически вращаться на самом деле очень просто. Раз правильный обработчик событий уже находится на своем месте, нам просто нужно его вызывать каждые n- микросекунд. Об этом позаботится следующая строка:

setInterval(sift, 8000);

1	setInterval(sift, 8000);

Выше в коде я запросил вызывать функцию sift каждые 8 секунд. Обратите внимание, продолжительность передается в микросекундах, следовательно, n тысяч равно n секунд.

Инициализация виджета

В настоящее время страница загружается с неинициализированным виджетом. Нам придется это исправить. Все, что нужно сделать – вызвать функцию show, с параметром установленным в начальную позицию.

После прикрепления обработчика событий, добавьте это:

show(index);

1	show(index);

Завершающий код

Вот мы и закончили! Окончательно код выглядит вот так:

$(document).ready(function()
{
	var index = 0;
	var images = $("#gallery img");
	var thumbs = $("#thumbs img");
	var imgHeight = thumbs.attr("height");
	thumbs.slice(0,3).clone().appendTo("#thumbs");
	for (i=0; i<thumbs.length; i++)
	{
		$(thumbs<em></em>).addClass("thumb-"+i);
		$(images<em></em>).addClass("image-"+i);
	}

	$("#next").click(sift);
	show(index);
	setInterval(sift, 8000);

	function sift()
	{
		if (index<(thumbs.length-1)){index+=1 ; }
		else {index=0}
		show (index);
	}

	function show(num)
	{
		images.fadeOut(400);
		$(".image-"+num).stop().fadeIn(400);
		var scrollPos = (num+1)*imgHeight;
		$("#thumbs").stop().animate({scrollTop: scrollPos}, 400);
	}
});

$(document).ready(function()

{

var index = 0;

var images = $("#gallery img");

var thumbs = $("#thumbs img");

var imgHeight = thumbs.attr("height");

thumbs.slice(0,3).clone().appendTo("#thumbs");

for (i=0; i<thumbs.length; i++)

{

$(thumbs<em></em>).addClass("thumb-"+i);

$(images<em></em>).addClass("image-"+i);

}

$("#next").click(sift);

show(index);

setInterval(sift, 8000);

function sift()

{

if (index<(thumbs.length-1)){index+=1 ; }

else {index=0}

show (index);

}

function show(num)

{

images.fadeOut(400);

$(".image-"+num).stop().fadeIn(400);

var scrollPos = (num+1)*imgHeight;

$("#thumbs").stop().animate({scrollTop: scrollPos}, 400);

}

});

Заключение

И вот что мы имеем: мы создали простой, но полезный слайдер. Надеюсь, что вы нашли этот учебник интересным и полезным. Не стесняйтесь использовать этот код где угодно в своих проектах и звоните во все колокола в комментах, если столкнулись с трудностями.

Вопросы? Похвалы? Критика? Двигайтесь в секцию комментариев и оставлйте сообщение. Счастливого кодирования! На этом урок по созданию простого слайдера для сайта окончен.

Просмотр Demo

Автор: Siddharth

Перевод и редакция: Рог Виктор и Андрей Бернацкий. Команда webformyself.

Источник: //net.tutsplus.com

E-mail: contact@webformyself.com

Проект webformyself.com — Как создать свой сайт. Основы самостоятельного сайтостроения

P.S. Хотите опубликовать интересный тематический материал и заработать? Если ответ «Да», то жмите сюда.

Метки: JavaScript, Javascript, iTunes, слайдер