function theRotator() {
    //добавляем первой картинке класс show
    $('.slider li:first').addClass('show');
	// Устанавливаем прозрачность всех картинок в 0
	$('.slider li').css({opacity: 0.0});

	// Берем первую картинку и показываем ее (по пути включаем полную видимость)
	$('.slider li:first').animate({opacity: 1.0},100);

	// Вызываем функцию rotate для запуска слайдшоу, 5000 = смена картинок происходит раз в 5 секунд
	setInterval('rotate()',12000);
}

function rotate() {
    // Берем первую картинку
    var current = ($('.slider li.show')?  $('.slider li.show') : $('.slider li:first'));
	
	// Берем следующую картинку, когда дойдем до последней начинаем с начала
	var next = ((current.next().length) ? ((current.next().hasClass('show')) ? $('.slider li:first') :current.next()) : $('.slider li:first'));

	// Расскомментируйте, чтобы показвать картинки в случайном порядке
	// var sibs = current.siblings();
	// var rndNum = Math.floor(Math.random() * sibs.length );
	// var next = $( sibs[ rndNum ] );

	// Подключаем эффект растворения/затухания для показа картинок, css-класс show имеет больший z-index
	next.css({opacity: 0.0})
	.addClass('show')
	.animate({opacity: 1.0}, 1500);

	// Прячем текущую картинку
	current.animate({opacity: 0.0}, 1000)
	.removeClass('show');
};