Question

我正在使用Wordpress的高级自定义字段插件并激活Repeater Field，以便客户能够添加任意数量的推荐。推荐内容均显示在前端的.quote div内。但是，我只希望一次显示两个.quote div（按连续顺序），并在时间淡入/淡出两个。

像这样：

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

我已将一些超级基本和可怕的代码拼凑到尝试并在此处说明我的观点：http://jsfiddle.net/9kg6L/

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

Answer 1

你可以这样做：

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/

如果有一个奇数，显示最后一个+第一个，然后从那时开始循环一个关闭，它可能会被改进而不是只显示最后一个。

Answer 2

离我很近。

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++;
}

你修好了

jQuery一次淡入/淡出两个div，循环并重复

2 个答案: