带有计时器的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将调用作为第一个参数传递的函数。 timeout参数以毫秒为单位，因此上面的代码在调用该函数之前要等待1秒钟。 由于上面的函数将其自身添加为回调，因此将无限重复