Question

问题：

我目前有一个正在运行的脚本，它基本上通过我的列表项目查看“赞助商 - ”并以设定的速度循环播放。

所以我的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;

})();
});

到目前为止，这一切都很好，但我需要知道如何将额外的列表项添加到同一个函数中。我有另一个列出了'fact-'类的列表，我想循环一遍。这无疑是错误的，但这是我试过的。

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

$(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;

})();
});

这不起作用，我只是需要一些帮助来尝试添加更多相同的功能，以便我可以针对各种其他周期列表。

为清晰度编辑

我不寻找第一个循环赞助商的循环然后事实，我希望两个循环同时运行。抱歉有任何困惑。

Answer 1

在工作的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;

})();
});

Answer 2

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

，则一切正常

参见工作示例here。

修改更新了fiddle以使用多个列表。现在两个周期与两个完全分开的列表同时工作。

$(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); });

将jQuery淡化为多个div的列表项

2 个答案: