Question

on the site I’m currently developing I have a panel on the news page which lists ‘Top Stories’, and a navigation for switching between stories.

But how would I go about automating it so that it cycles through each story automatically?

Please click the following link for an example – http://jsfiddle.net/cyxLw/

Thanks!

Answer 1

I used the setInterval function to run the following function to switch to the next story, after checking one exists.

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');
}