Меняющийся текст на javascript/jQuery

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

Для этих целей я написал небольшую функцию, которая может вам помочь.

Для начала приведу сам код функции:

	function Rotator(start_from){
		var phrases = ["Какой-то текст 1","Какой-то текст 2","Какой-то текст 3"];
		var total = phrases.length;
		var interval = 5000;
		if(void 0 === start_from){
			start_from = 0;
		}

		$(".textrotator").text(phrases[start_from]).animate({"opacity":"1"}, 1000, function(){
					if(start_from >= (total-1)){
						setTimeout(function(){
							$(".textrotator").animate({"opacity":"0"}, 1000, function(){
								Rotator();
							});
						}, interval);
					}else{
						start_from++;
						setTimeout(function(){
							$(".textrotator").animate({"opacity":"0"}, 1000,function(){
								Rotator(start_from);
							});
						}, interval);
			
					}			
			
		})
	}

Теперь немного разъяснения. Начнем с того, что функция работает на jQuery, так что убедитесь, что он у вас установлен.

В функции используются несколько ключевых моментов: идентификатор или класс элемента, интервал переключения, и собственно сами фразы.

.textrotator - класс, с которым мы работаем.

inverval - интервал в милисекундах, через который будут переключаться фразы.

phrases - массив фраз, которые будут крутиться в ротации.

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

Пример в работе:

Крутим картинки

Если же вам нужно пустить в ротацию картинки, то нужно лишь немного видоизменить скрипт:

	function Rotator(start_from){
		var images = ["/images/1.jpg","/images/2.jpg","/images/3.jpg"];
		var total = images.length;
		var interval = 5000;
		if(void 0 === start_from){
			start_from = 0;
		}

		$(".imagerotator").attr("src", images[start_from]).animate({"opacity":"1"}, 1000, function(){
					if(start_from >= (total-1)){
						setTimeout(function(){
							$(".imagerotator").animate({"opacity":"0"}, 1000, function(){
								Rotator();
							});
						}, interval);
					}else{
						start_from++;
						setTimeout(function(){
							$(".imagerotator").animate({"opacity":"0"}, 1000,function(){
								Rotator(start_from);
							});
						}, interval);
			
					}			
			
		})
	}

В случае с картинками применять скрипт мы будем к тегу img с классом imagerotator. В массив мы помещаем ссылки на картинки, и вместо $(".textrotator").text(phrases[start_from]) мы указываем $(".imagerotator").attr("src", images[start_from]). Не забываем также дальше по коду заменить класс.

Запускается скрипт очень просто:

	<script type="text/javascript">
	$(document).ready(function(){
		Rotator();
	})
	</script>