jquery循环顺序

Question

在一个页面中，我有 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秒：暂停
等等。

我已经制定了公式，但发现实现它很困难

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

divA = 超时 * (索引) + (1000 * (索引-1))
divB = 超时 * (索引) + (1000 * (索引-1) + 333)
divC = 超时 * (索引) + (1000 * (索引-1) + 666)
divD = 超时 * (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只有两张图片）

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

Answer 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); 

}