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

Question

我在首页上有三个旋转器，我希望它们在 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
    });
});

在初始开始后 - 他们应该根据他们的常规超时进行。

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

Answer 1

看起来您正在使用jQuery Cycle 插件？如果是这样，有一个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,
    });
});

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

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