Блог

на сайте, который я сейчас разрабатываю, у меня есть панель на странице новостей, в которой перечислены «Главные новости», и навигация для переключения между историями.

Но как бы мне автоматизировать его, чтобы он автоматически циклически просматривал каждую историю?

Пожалуйста, перейдите по следующей ссылке для примера — http://jsfiddle.net/cyxLw /

Спасибо!

Используйте эти http://plugins .jquery.com/project/timers :

 $(document).everyTime(1000, function(i) {
  swapStory();
});
  

вы также можете использовать setInterval ( «doSomething()», interval_time);

Если в вашей навигации есть ссылка, которая ведет к следующей истории в списке, вы могли бы использовать setInterval() для генерации события щелчка по ней.

 <script type="text/javascript">

function autoNext ()
{
    $('#id_of_my_next_story_link').click ();
}

var nextTimer = setInterval (autoNext, 10000); // 10 seconds
</script>
  

вы можете использовать setInterval, он будет выполнять функцию повторно через указанное время…

я предполагаю, что вы динамически добавляете лучшие истории

 var timeAfterYouInsertNewTopStories = 3000;
setInterval(function() {
            //all your code here
        }, timeAfterYouInsertNewTopStories );
  

Я внес некоторые изменения в ваш код. Посмотрите здесь:

http://jsfiddle.net/cyxLw/7/

Я использовал функцию setInterval для запуска следующей функции для перехода к следующей истории после проверки ее существования.

 if($('div#top-stories').length) {
        setInterval(function() {
            nextStory();
        }, 10000 );
    }
function nextStory() {
    //Check if there is another story, if not show the first story
    if($('div#top-stories ul li.active').next('li').length) {
        var next = $('div#top-stories ul li.active').next('li').attr('id');
    } else {
        var next = $('div#top-stories ul li').first().attr('id');
    }

    $('div#top-stories ul li').removeClass('active');
    $('li#' next).addClass('active');

    $('div#top-stories div.panel.active').fadeOut(100, function() {
        $('div#' next '-box').fadeIn(100).addClass('active');
    }).removeClass('active');
}
  

Попробуйте плагин jCarousel.