Question

在我正在开发的网站上我在新闻页面上有一个面板，其中列出了“热门故事”，以及用于在故事之间切换的导航。

但是我如何自动化它以便它自动循环每个故事？

请点击以下链接查看示例 - http://jsfiddle.net/cyxLw/

谢谢！

Answer 1

使用这些http://plugins.jquery.com/project/timers：

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

Answer 2

尝试jCarousel plugin。

Answer 3

你也可以使用setInterval（“doSomething（）”，interval_time）;

Answer 4

如果导航中的链接移动到列表中的下一个故事，则可以使用setInterval（）在其上生成单击事件。

<script type="text/javascript">

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

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

Answer 5

您可以使用setInterval它会在指定的时间后重复执行该功能......

我假设您正在动态添加热门新闻

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

Answer 6

我对您的代码进行了一些更改。看这里：

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

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

jQuery - 自动化div切换器

7 个答案: