带有计时器的jQuery addClass removeClass

Question

我对“最新消息”模块有疑问。请查看http://www.proudfootsupermarkets.com/ 以查看该模块的示例（它是靠近页面顶部的 div，其中包含大图像）。

目前我已经设置好了，当用户点击一个标签时，主文章就会显示出来。用于此的 jQuery 是：

    jQuery(document).ready(function() {

    $(".moduletable.latestnews article:first-child").addClass("atfront")

    $(".moduletable.latestnews article").click(function(){
        $(".moduletable.latestnews article").css("zIndex",1).addClass("atback").removeClass("atfront");
        $(this).css("zIndex",100).addClass("atfront").removeClass("atback");
    });
});

这一切都非常简单明了。我遇到的问题是我希望文章在几秒钟后自动更改。然后这将进入一个无限循环，从文章 1 开始，然后在几秒钟后显示文章 2 等等……

我确信这相当简单，但我已经用尽了我对 JavaScript 的了解。感谢您提供的任何帮助:)

我创建了一个 jsfiddle http://jsfiddle.net/Bempv/

Answer 1

你可以使用 setTimeout 来改变前面的文章。如果您选择带有“.atfront”类的文章，然后使用.next() 选择器，您应该会得到您正在寻找的功能

$(function(){
    var articleToggler = function articleToggler(){
    var front = "atfront",
        back = "atback";
    return function(){
       var selection = $(".moduletable.latestnews")
                          .find("article.atfront")
                          .addClass(back)
                          .removeClass(front);
           next = selection.next("article"); 
           next = next.length ? next : $(".moduletable.latestnews")
                                   .find("article").first();
           next.addClass(front)
               .removeClass(back);
           console.log(selection.length,next[0])  


       setTimeout(articleToggler(),1000); //changes every second
    };
};

//start the rotation
(articleToggler())();
});

一旦超时到期，setTimeout 将调用作为第一个参数传递的函数。超时参数以毫秒为单位，因此上述代码在调用函数之前等待 1 秒。由于上面的函数将它自己添加为回调，这将无限重复