jQuery连续循环多个幻灯片，初始延迟

Question

我有一个带有网格的横幅，其中包含 8 个幻灯片，我想连续运行。

我已经一切正常，但由于某种原因，在第一次过渡开始之前有很长的延迟，我无法弄清楚。

这是我到目前为止尝试过的

$(document).ready(function(){
var $banner = $('.banner');
var sets = [".r1-c1", ".r2-c4", ".r1-c6", ".r2-c2", ".r1-c5", ".r1-c3", ".r2-c6", ".r2-c1"];
for(var i = 0; i < sets.length; i++){
    $banner.find(sets[i]).cycle({
        'delay' : 1000 * i,
        'speed' : '1000',
        'timeout' : '7000'
    })
}
});

感谢您的任何帮助，

Answer 1

我通过更改方法解决了这个问题。

我没有尝试同时运行幻灯片，而是依靠延迟让它们连续过渡，而是将所有幻灯片设置为手动激活。

这是我使用的代码。它使用包含幻灯片集的唯一选择器的"sets"数组。转换将按给定的顺序进行。

var $banner = $('.banner');
var sets = [".r1-c1", ".r2-c4", ".r1-c6", ".r2-c2", ".r1-c5", ".r1-c3", ".r2-c6", ".r2-c1"];
var current = 0;
// setup slideshows
$.each(sets, function(index,value){
    $banner.find(value).cycle({
        'timeout' : 0,
        'speed' : 1000,
        'skipInitializationCallbacks' : true,
        'after' : onAfter
    });
});
// run after slide transition
function onAfter(){
    $banner.find(sets[current++ % sets.length]).cycle('next');
}
// initiate first slideshow
$banner.find(sets[0]).cycle('next');

Answer 2

在上面的代码中，您分别使用"1000"和"7000"表示速度和超时。

您需要使用数字（例如 1000 而不是"1000"）。也许是时候翻译"1000"和"7000"了，这会导致最初的延迟。

替换上述代码中的以下内容：

'speed' : '1000',
'timeout' : '7000'

由

'speed' : 1000,
'timeout' : 7000