jQuery旋转器的延迟启动，彼此相隔一秒答案

【问题标题】：Delay start of jQuery rotators, one second apart from each otherjQuery旋转器的延迟启动，彼此相隔一秒
【发布时间】：2009-12-19 00:05:10
【问题描述】：

我在首页上有三个旋转器，我希望它们在 1 秒后开始。

$(document).ready(function(){
    $('#rot_top').cycle({       
        speed: 500,
        timeout: 2000
    });
    $('#rot_mid').cycle({       
        speed: 500,
        timeout: 2000
    });
    $('#rot_btm').cycle({       
        speed: 500,
        timeout: 2000
    });
});

在初始开始后 - 他们应该按照他们的常规超时继续。

非常感谢您提前提供的帮助。

【问题讨论】：

您可以通过在代码前面放置四个空格来提高代码的可读性，这也会使其语法突出显示。欢迎来到 Stackoverflow！ +1 因为你的新人！

标签： javascript jquery timer rotator

【解决方案1】：

您似乎在使用jQuery Cycle plugin？如果是这样，有一个 delay 选项只会延迟第一次更改：

$(document).ready(function(){
    $('#rot_top').cycle({           
        speed: 500,
        timeout: 2000
    });
    $('#rot_mid').cycle({           
        speed: 500,
        timeout: 2000,
        delay: 1000,
    });
    $('#rot_btm').cycle({           
        speed: 500,
        timeout: 2000
        delay: 2000,
    });
});

这将立即开始第一个循环，一秒钟后开始第二个循环，然后一秒钟后开始第三个循环。

【讨论】：

【解决方案2】：

setTimeout 对此非常有用，试试这个：

$(document).ready(function(){ 

  startCycle = function({
    $('#rot_top').cycle({speed: 500, timeout: 2000 }); 
    $('#rot_mid').cycle({speed: 500, timeout: 2000 }); 
    $('#rot_btm').cycle({speed: 500, timeout: 2000 }); 
  })

  setTimeout(startCycle();, 1000)
});

【讨论】：

我认为这会导致所有三个旋转器同时启动。