Меняющийся текст на 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>