1

我正在使用 Wordpress 的 Advanced Custom Fields 插件，并激活了Repeater Field，以使客户能够根据需要添加任意数量的推荐。每个推荐都显示在.quote前端的 div 中。但是，我只希望.quote一次显示两个 div（按连续顺序），并一次淡入/淡出两个。

像这样：

页面加载：显示引号 1 和 2。 7 秒过去：显示引号 3 和 4。 又过了 7 秒：显示引号 5 和 6。重复等，不依赖于引号的数量（可能有 20、5、18 等），一旦.quote达到最后两个 div，它将从头开始重新启动。

我已经拼凑了一个超级基本和可怕的代码来尝试在这里说明我的观点：http: //jsfiddle.net/9kg6L/

我确信有一个简单的解决方案，但我仍然是一个写 jQuery 的新手，所以我希望从这个小经验中学习:)

4

2 回答 2

3

你可以这样做：

var quotes = $('#container .quote');

function cycleQuotes () {
    var current = quotes.filter(".active"), next;
    if (current.length == 0 || (next = current.next().next()).length == 0 ) {
        // first iteration or last, select first two
        next = quotes.slice(0,2);
    }
    current.removeClass('active').fadeOut(400).promise().done(function(){
        next.addClass('active').fadeIn(); 
    });
    setTimeout(cycleQuotes,7*1000);
}
cycleQuotes();

http://jsfiddle.net/9kg6L/1/

如果有奇数，它可能会改进为，而不是只显示最后一个，先显示最后一个 +，然后从那时起循环显示一个。

于 2013-04-09T22:15:24.203 回答
1

有点靠近。

var interval=2000;
var j=4
for(var i=2;i<50;i++){  

setTimeout(function() {
    quote.slice(i,j).fadeOut();
}, interval);
interval=interval+2000;
      j=j+2;
      i++;
}

你修好它

于 2013-04-09T22:11:30.970 回答