jQuery循环顺序答案

【问题标题】：jquery cycle sequentialjQuery循环顺序
【发布时间】：2011-01-18 08:06:16
【问题描述】：

在一个页面中，我有 4 个要制作幻灯片的 div。我们称它们为 divA-divD。每个 div 有 2 组图像。

所以我使用 jQuery 循环将这些 div 转换为幻灯片。问题是，我想要一个连续的幻灯片。我不确定我能不能解释清楚，但它是这样的。

超时 = 4000（4 秒） divA = 1000 + 超时（1 秒） divB = 1333 + 超时 divC = 1666 + 超时 divD = 2000 + 超时（2 秒）

现在我的当前代码是

var timeout = 4000;
$('.divA').cycle({
    fx:     'fade',
    speed:  2000,
    timeoutFn: 1000+timeout
});
$('.divB').cycle({
    fx:     'fade',
    speed:  2000,
    timeoutFn: 1333+timeout
});

divC 和 divD 以此类推

但是结果会是这样的

divA = 1000 + 4000 = 5000
divB = 1333 + 4000 = 5333
divC = 1666 + 4000 = 5666
divD = 2000 + 4000 = 6000

如果留得太久，这将使 divD 最终赶上 divA，因为：

divA = 5,10,15,20,25,30
divD = 6,12,18,24,30

divD 的第五张幻灯片将与 divA 第六张幻灯片同时进行。

我希望循环在 divD 的循环之后以某种方式暂停。所以它是这样的：

1-4 秒：显示图像
第 4-5 秒：淡出 divA - divD 然后再暂停 4 秒
第 5-8 秒：仍然暂停
9-10 秒：另一个循环，然后再暂停 4 秒
10-13 秒：暂停
等等。

我已经制定了公式，但发现实施起来有困难

超时* (index) + (1000* (index-1));

divA = 超时 * (index) + (1000 * (index-1))
divB = 超时 * (index) + (1000 * (index-1) + 333)
divC = 超时 * (index) + (1000 * (index-1) + 666)
divD = timeout * (index) + (1000 * (index-1) + 1000)

其中 index = 幻灯片的循环 (1,2,3,4,5,.....)

这会让

divA = 4000 * 1 + 1000 * (0) = 4000、4000 * 2 + 1000 * (1) = 9000 等
divB = 4000 * 1 + 1000 * (0) + 333 = 4333、4000 * 2 + 1000 * (1) + 333 = 9333 等
divC = 4000 * 1 + 1000 * (0) + 666 = 4666、4000 * 2 + 1000 * (1) + 666 = 9666 等
divD = 4000 * 1 + 1000 * (0) + 1000 = 5000、4000 * 2 + 1000 * (1) + 1000 = 10000 等

问题是，我如何在 jquery 循环中做到这一点？我试过使用 timeoutFn 并有一个这样的回调函数：

function calculateTimeout(currElement, nextElement, opts, isForward) { 
    var index = opts.currSlide; 

    return timeout * (index) + (1000* (index-1)); 
}

但索引保持在 0->1->0->1-> 等（因为我每个 div 只有两个图像）

对不起，如果太长或者我不够清楚，并提前感谢您的回答

【问题讨论】：

用 jQuery 链接循环/动画怎么样 - 这样它会在第一个动画完成后执行？也许结合jQuery延迟？一个 jsfiddle 演示会非常有用。
jsfiddle.net/uygey/2 虽然我不知道为什么它似乎不起作用，但在我的本地主机中它可以工作
好的，这个有效：jsfiddle.net/uygey/3

标签： jquery cycle

【解决方案1】：

我找到了解决办法！

http://jsfiddle.net/uygey/4/

或者，如果您想阅读，请阅读下文。这有点像黑客/作弊，但不管怎样，我猜 :)

var index = -1;

$('.divA,.divB,.divC,.divD').cycle({
fx:     'fade',
speed:  2000,
timeoutFn: calculateTimeout
});

function calculateTimeout(currElement, nextElement, opts, isForward) { 
var class = $(currElement).parent().attr('class');
var timeout = 4000;
var wait;
if(class=="divA"){
wait = 0;
}else if(class=="divB"){
wait = 333;    
}else if(class=="divC"){
wait = 666;
}else if(class=="divD"){
wait = 1000;
}

if(class=="divA"){
index++; 
}    

return timeout * (index) + ((1000* (index-1)) + wait); 

}

【讨论】：