Простой слайдер на jQuery

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

Как написать самостоятельно подобный слайдер, подробно рассматривается в статьях "Создаем простой слайдер ", "Добавляем слайдеру функциональность " и "Делаем код галереи удобнее ".

Скачать готовый код, или посмотреть демо готового варианта можно по ссылкам ниже:

Для кнопок будем использовать следующее изображение:

HTML разметка состоит из общего контейнера внутри которого прописаны пути к изображениям:

<div id="slider" class="slider_wrap">		
	<img alt="Image 1" class="active" src="/images/01.jpg" />
	<img alt="Image 2" src="/images/02.jpg" />
	<img alt="Image 3" src="/images/03.jpg" />
</div>

Количество картинок в контейнере может быть не ограничено. Теперь подключаем jQuery библиотеку и пишем следующий скрипт (лучше и правильнее разместить его в отдельном файле):

$(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 ();
	});	
});

Что бы все хорошо смотрелось и работало применяем следующие стилевые правила:

.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;
}

Слайдер проверен и отлчно работает в ИЕ 7-8-9, FireFox, Chrome, Safari.