SiteIS

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

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

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

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

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

Добавляем слайдеру функциональность

Для оформления кнопок навигации нам потребуется фоновая картинка. Выполним ее в виде спрайта.

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

В css слегка подправим существующие стили и добавим стилевые правила для кнопок, по клику на которые будем листать фото вперед/назад.

.slider_wrap {
margin:100px auto 0;
width:680px;
height:400px;
position:relative;
overflow:hidden;
}
.slider_wrap img {
width:640px;
height:auto;
display:none;
position:absolute;
top:0;
left:20px;	
}
.slider_wrap img:first-child {
display:block;
}
.slider_wrap span {
margin-top:-13px;
width:15px;
height:26px;
display:block;
position:absolute;
top:50%;
cursor:pointer;
background:url(slider2_arrow.png) no-repeat;
}
.slider_wrap span.next {
right:0;
background-position:-15px 0;
}
.slider_wrap span.next:hover {
background-position:-15px -26px;
}
.slider_wrap span.prev {
left:0;
background-position: 0 0;
}
.slider_wrap span.prev:hover {
background-position: 0 -26px;
}

Блоку обертке увеличиваем ширину на 40px и сдвигаем изображения на 20px от левого края. Теперь по бокам у нас появилось по 20px свободного пространства для навигации. Сами кнопки будем размещать с помощью элементов span с соответствующим классом. Благодаря тому, что стили для них уже написаны, кнопки разместятся в нужных местах, как только мы добавим разметку для них.

Теперь можно приступать к js. Перво наперво разделим функцию autoCange на две разные функции.

function cange () {
	el.fadeOut(500);
	el.filter(':nth-child('+indexImg+')').fadeIn(500);			
}

function autoCange () {	
	indexImg++;
	if(indexImg > indexMax) {
		indexImg = 1;
	}			
	cange();
}

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

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

var interval = setInterval(autoCange, 3000);

$('#slider').mouseover(function(){
	clearInterval(interval);
}); 
$('#slider').mouseout(function(){
	interval = setInterval(autoCange, 3000);
});	

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

Иными словами, сначала мы создаем переменную, в которой сохраняем значение, возвращаемое функцией setInterval.

var interval = setInterval(autoCange, 3000);

Затем с помощью метода mouseover(); отслеживаем, когда курсор мыши появится в области слайдера и применяем clearInterval(); в скобках которого указываем имя созданной переменной.

var interval = setInterval(autoCange, 3000);

$('#slider').mouseover(function(){
	clearInterval(interval);
}); 

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

var interval = setInterval(autoCange, 3000);

$('#slider').mouseover(function(){
	clearInterval(interval);
}); 
$('#slider').mouseout(function(){
	interval = setInterval(autoCange, 3000);
});	

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

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

	$('#slider').mouseover(function() {
		clearInterval(interval);
	});
	$('#slider').mouseout(function() {
		interval = setInterval(autoCange, 3000);
	});
});

Отлично, двигаемся дальше. Добавим галерее стрелки (стили для них мы уже написали). Нам уже приходилось выполнять подобное действие, когда добавляли маркеры в меню "Аккордеон".

$('#slider').append('<span class="next"></span><span class="prev"></span>');

Если посмотреть на результат в браузере, то мы увидим, что кнопки навигации появились, но перелистывания фото при клике по ним не происходит. Приступаем к последнему этапу - пишем логику для навигации.

$('span.next').click(function() {
	indexImg++;
	if(indexImg > indexMax) {
		indexImg = 1;
	}
	change ();
});
$('span.prev').click(function() {
	indexImg--;
	if(indexImg < 1) {
		indexImg = indexMax;
	}
	change ();
});

Тут, мне кажется, все очень просто и понятно. При клике на кнопке next увеличиваем значение indexImg на единицу. Проверяем получившееся число со значением в переменной indexMax и если оно оказывается большим, то присваиваем indexImg единицу. После этого вызываем функцию change (алгоритм такой же, как в функции autoCange).

При клике на кнопке prev значение indexImg уменьшаем на один, проверяем не стало ли оно меньше единицы и, если такое произошло, то присваиваем indexImg число, сохраненное в indexMax (переходим к последнему фото).

Можно полюбоваться результатом в браузере - получено то, к чему стремились. Ниже привожу полный листинг js кода галереи для самопроверки:

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

	$('#slider').mouseover(function() {
		clearInterval(interval);
	});
	$('#slider').mouseout(function() {
		interval = setInterval(autoCange, 3000);
	});
	
	$('#slider').append('<span class="next"></span><span class="prev"></span>');
	
	$('span.next').click(function() {
		indexImg++;
		if(indexImg > indexMax) {
			indexImg = 1;
		}
		change ();
	});
	$('span.prev').click(function() {
		indexImg--;
		if(indexImg < 1) {
			indexImg = indexMax;
		}
		change ();
	});	
});

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

Скачать пример

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

Автор: Super User