jQuery addClass removeClass with timer

我对“最新消息”模块有疑问。 请查看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

 $(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秒。 由于上面的函数将其自身添加为回调，因此将无限重复