Оптимизируем код слайдера

Откроем в блокноте js код галереи и внимательно посмотрим на него. Не знаю как вам, а мне, например, кажется не очень удобно, если придется поменять id обертывающему блоку, то в коде это нужно сделать в четырех местах. Проще обьявить переменную, в которой будет хранится id нужного болка. Попробуем это сделать. Создадим переменную с именем elWrap и присвоим ней значение $('#slider'). Теперь в коде можно обращаться к элементу #slider уже через эту переменную. Вот как будет выглядеть js:

$(function () {
	var elWrap = $('#slider'),
		el =  elWrap.find('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);

	elWrap.mouseover(function() {
		clearInterval(interval);
	});
	elWrap.mouseout(function() {
		interval = setInterval(autoCange, 3000);
	});
	
	elWrap.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 в html коде для обертывающего блока и присвоить это значение перемененной elWrap. Больше ничего нигде менять не потребуется.

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

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

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

Либо, если, ну никак нельзя поменять html, то объявить переменные после того, как будет добавлена разметка для кнопок с помощью js. В нашем случае будем использовать второй вариант. Окончательный код теперь у нас будет выглядеть следующим образом:

$(function () {
	var elWrap = $('#slider'),
		el =  elWrap.find('img'),
		indexImg = 1,
		indexMax = el.length,
		phase = 3000;
	
	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, phase);

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

В заключении ссылка на готовую галерею.

Ну а мы в следующей статье поговорим, как создать слайдер с прокруткой (карусель).