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秒：暂停
等等。

我已经制定了公式，但发现实施它的难度

超时*（索引）+（1000 *（索引-1））;

divA =超时*（指数）+（1000 *（指数-1））
divB =超时*（索引）+（1000 *（索引-1）+ 333）
divC =超时*（索引）+（1000 *（索引-1）+ 666）
divD =超时*（索引）+（1000 *（索引-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只有两个图像）

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

1 个答案:

答案 0 :(得分：0)

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

}

jquery循环顺序

1 个答案: