SiteIS

jQuery - безграничные возможности в дизайне Вашего сайта!

- Один из самых популярных на сегодня среди веб разработчиков фреймворк

- Позволяет быстро и легко создать потрясающие веб-приложения

- Удивительно красивые анимационные эффекты

- Улучшение пользовательского интерфейса

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

Слайдер, который мы будем обсуждать в этой статье, должен листать, пока что, только изображения (без всяких дополнительных информационных блоков). Соответственно, html разметка не потребует разных хитростей - создадим общий блок, внутри которого будут прописаны пути к нужным картинкам. Что бы jQuery осуществлял поиск блока с галереей быстрее, помимо класса присвоим контейнеру еще и id. Больше ничего от html нам не потребуется:

<div id="slider" class="slider_wrap">
	<img src="/slider_image1.jpg" alt="" />
	<img src="/slider_image2.jpg" alt="" />
	<img src="/slider_image3.jpg" alt="" />
</div>

Переходим к стилизвации галереи. Поскольку на данный момент это единственный объект на странице, то расположим его по центру экрана и сделаем сверху отступ (например, 100px). Затем, зададим основному блоку размеры, равные размерам фото (все изображения нужно предварительно сделать одного размера) и присвоим ему свойство relative, что бы все элементы, которые мы будем позиционировать абсолютно (а мы будем это делать), располагались относительно этого блока. Ну и, наконец, все, что не помещается в контейнер, обрежем при помощи свойства overflow:hidden;. Код получится примерно такой:

.slider_wrap {
	margin:100px auto 0;
	width:640px;
	height:400px;
	position:relative;
	overflow:hidden;
}

На этом со стилями можно было бы и закончить, но давайте, на всякий случай, напишем еще пару строк, что бы наша конструкция никуда не расползалась при любых условиях. Установим размеры для фото (если вдруг вы решили не приводить их к одному размеру), позиционируем их абсолютно и сделаем видимым только первое изображение. Весь css код будет выглядеть так:

.slider_wrap {
	margin:100px auto 0;
	width:640px;
	height:400px;
	position:relative;
	overflow:hidden;
}
.slider_wrap img {
	width:100%;
	height:auto;
	display:none;
	position:absolute;
	top:0;
	left:0;	
}
.slider_wrap img:first-child {
	display:block;
}

Все, осталось только применить "магию", имя которой jQuery, и слайдер заработает. Начнем колдовать.

Создадим переменную, в которой будем хранить индекс текущей картинки, и присвоим ему значение 1 (т.е. изначально в переменной будет хранится порядковый номер первой картинки). Назовем эту переменную (что бы было понятно, что она хранит) indexImg.

$(function () {
	var indexImg = 1;	
});

Нам понадобится еще одна переменная, в которой будет храниться значение, равное количеству всех изображений в контейнере. Дадим ей имя indexMax.

$(function () {
	var indexImg = 1,
		indexMax = $('#slider img').length;	
});

Теперь нам нужно заставить картинки меняться через заданный промежуток времени. Самый правильный способ осуществить это - использовать метод js setInterval(). Он позволяет многократно запускать пользовательскую функцию (созданную, например, нами) через заданные промежутки времени. В скобках метода указываются через запятую два параметра. Первый - это имя пользовательской функции, второй - длительность задержки между вызовами (промежуток времени, через который функция запустится снова). Но прежде чем этот метод станет возможным использовать, нужно написать ту самую пользовательскую функцию. Этим и займемся.

Поскольку функция будет автоматически менять фото в блоке, то и назовем ее autoChange. При каждом запуске она должна увеличивать значение переменной indexImg на единицу (что будет соответствовать следующей в блоке фотографии), затем должна сравнить значение в indexImg со значением в indexMax и если indexImg окажется больше, то присвоить ему единицу (возврат к первому фото). Ну и, конечно, функция должна спрятать текущее фото и показать фото с индексом, который хранится в indexImg на текущий момент. Отобразим все вышесказанное в коде:

$(function () {
	var indexImg = 1,
		indexMax = $('#slider img').length;	
		
	function autoCange () {	
		indexImg++;
		if(indexImg > indexMax) {
			indexImg = 1;
		}			
		$('#slider img').fadeOut(500);
		$('#slider img:nth-child('+indexImg+')').fadeIn(500);
	}		
});

Вот сейчас можно воспользоваться методом setInterval(). В качестве первого параметра укажем ему имя только что написанной функции, а в качестве второго установим значение, например, 5000, что равняется пяти секундам.

$(function () {
	var indexImg = 1,
		indexMax = $('#slider img').length;	
		
	function autoCange () {	
		indexImg++;
		if(indexImg > indexMax) {
			indexImg = 1;
		}			
		$('#slider img').fadeOut(500);
		$('#slider img:nth-child('+indexImg+')').fadeIn(500);
	}
	
	setInterval(autoCange, 5000);	
});

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

$(function () {
	var el =  $('#slider img'),
		indexImg = 1,
		indexMax = el.length;
		
	function autoCange () {	
		indexImg++;
		if(indexImg > indexMax) {
			indexImg = 1;
		}			
		el.fadeOut(500);
		el.filter(':nth-child('+indexImg+')').fadeIn(500);
	}	
	setInterval(autoCange, 3000);	
});

Если копнуть еще глубже, то функцию autoCange() неплохо было бы разделить на несколько - одна будет прятать текущую картинку и показывать следующую, а вторая будет отвечать за автоматическую смену изображений. Но что бы уяснить, для чего такое может понадобиться, нужно немного усложнить функционал слайдера (например, добавить ему кнопки навигации, что бы пользователь мог, кликая по ним, листать картинки в обоих направлениях). Несмотря на то, что перед нами не ставилась такая задача, мы рассмотрим, как это делается в следующей статье.

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

Скачать готовый код