1

问题：

我目前有一个正在运行的脚本，它基本上用一类“赞助商”浏览我的列表项，并以设定的速度循环浏览它们。

所以我的html看起来像：

<ul>
  <li class="sponsor-1">This is sponsor one</li>
  <li class="sponsor-2">This is sponsor two</li>
  <li class="sponsor-3">This is sponsor three</li>
</ul>

工作 jQuery：

$(document).ready(function() {

var divs = $('li[class^="sponsor-"]').hide(),
    i = 0;

(function cycle() {

    divs.eq(i).fadeIn(400)
              .delay(1000)
              .fadeOut(400, cycle);

    i = ++i % divs.length;

})();
});

到目前为止这一切都很好，但我需要知道如何将额外的列表项添加到同一个函数中。我有另一个列表，其中包含一个“事实”类，我也想循环浏览。这无疑是非常错误的，但这是我尝试过的。

我接下来尝试了什么（不工作）

$(document).ready(function() {

var sponsors = $('li[class^="sponsor-"]').hide(),

var facts = $('li[class^="fact-"]').hide(),

    i = 0;

(function cycle() {

    sponsors.eq(i).fadeIn(400),
     facts.eq(i).fadeIn(400)
              .delay(1000)
              .fadeOut(400, cycle);

    i = ++i % sponsors.length;
    i = ++i % facts.length;

})();
});

这不起作用，我只需要一些帮助来尝试将更多内容添加到同一功能中，以便我可以针对其他各种循环列表。

为清晰而编辑

我不是在寻找第一个周期赞助商的周期，然后是事实，我希望两个周期同时运行。很抱歉有任何混淆。

4

2 回答 2

0

在工作 jQuery 代码中，只需更改：

$('li[class^="sponsor-"]')

至

$('li[class^="sponsor-"], li[class^="fact-"]')

要将两个列表分开，只需复制代码（不是最干净的方式，但它是最快和最简单的）。

$(document).ready(function() {

var sponsors = $('li[class^="sponsor-"]').hide(),

var facts = $('li[class^="fact-"]').hide(),

var facts_i = 0;
var sponsors_i = 0;

(function cycle() {


     sponsors.eq(sponsors_i).fadeIn(400)
              .delay(1000)
              .fadeOut(400, cycle);


    sponsors_i = ++sponsors_i % sponsors.length;

})();

(function cycle2() {


     facts.eq(facts_i).fadeIn(400)
              .delay(1000)
              .fadeOut(400, cycle2);


    facts_i = ++facts_i % facts.length;

})();
});
于 2012-09-26T08:49:40.840 回答
0

如果您将divs变量更改为此，一切正常var divs = $('li[class^="sponsor-"],li[class^="fact-"]')

请参阅此处的工作示例。

编辑 更新小提琴以使用多个列表。现在两个循环同时在两个完全分离的列表中工作。

$(document).ready(function() {
    var sponsors = $('li[class^="sponsor-"]').hide(),
    facts = $('li[class^="fact-"]').hide(),
    i = 0;

    function cycle(list,itemNbr) {
        list.eq(itemNbr).fadeIn(400).delay(1000)
            .fadeOut(400,function(){cycle(list,++itemNbr % list.length)});
    };

    cycle(sponsors,i);
    cycle(facts,i);    
});​
于 2012-09-26T08:54:11.300 回答