1

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

4

1 回答 1

2

您可以使用 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 秒。由于上述函数将其自身添加为回调,这将无限重复

于 2012-11-12T10:31:50.203 回答