javascript - 循环 2 同步幻灯片，幻灯片循环之间有延迟

Question

当使用来自 cycle2 API 的同步幻灯片放映示例时，我试图在幻灯片放映之间添加顺序延迟；例如:5s、10s、15s、20s ... 即第一个 div.cycle-slideshow 将在 5s 开始，然后第二个将在 10s 触发，然后是 15s，接下来是 20s，然后第一个将在 25s 再次开始，然后循环继续。 http://jsfiddle.net/azeef/Pefen/

我怎样才能做到这一点？

<div class="cycle-slideshow" 
    data-cycle-fx=scrollHorz
    data-cycle-reverse=true
    data-cycle-timeout=5000
    data-index=1
    >
    <img src="http://malsup.github.io/images/beach1.jpg">
    <img src="http://malsup.github.io/images/beach2.jpg">
    <img src="http://malsup.github.io/images/beach3.jpg">
    <img src="http://malsup.github.io/images/beach4.jpg">
</div>

<div class="cycle-slideshow" 
    data-cycle-fx=scrollVert
    data-cycle-timeout=10000
    data-index=2
    >
    <img src="http://malsup.github.io/images/beach1.jpg">
    <img src="http://malsup.github.io/images/beach2.jpg">
    <img src="http://malsup.github.io/images/beach3.jpg">
    <img src="http://malsup.github.io/images/beach4.jpg">
</div>

<div class="cycle-slideshow" 
    data-cycle-fx=scrollVert
    data-cycle-timeout=15000
    data-cycle-reverse=true
    data-index=4
    >
    <img src="http://malsup.github.io/images/beach1.jpg">
    <img src="http://malsup.github.io/images/beach2.jpg">
    <img src="http://malsup.github.io/images/beach3.jpg">
    <img src="http://malsup.github.io/images/beach4.jpg">
</div>

<div class="cycle-slideshow" 
    data-cycle-fx=scrollHorz
    data-cycle-timeout=20000
    data-index=3
    >
    <img src="http://malsup.github.io/images/beach1.jpg">
    <img src="http://malsup.github.io/images/beach2.jpg">
    <img src="http://malsup.github.io/images/beach3.jpg">
    <img src="http://malsup.github.io/images/beach4.jpg">
</div>

Answer 1

将 delay 选项与每个幻灯片放映的 timeout 结合使用。您可以设置一个负延迟，让第一张幻灯片在 5 秒后开始放映，然后再等 20 秒。

<div id=container>
    <div class="cycle-slideshow" 
        data-cycle-fx=scrollHorz
        data-cycle-reverse=true
        data-cycle-timeout=20000
        data-cycle-delay="-15000"
        data-index=1
        ><!-- slides --></div>

    <div class="cycle-slideshow" 
        data-cycle-fx=scrollVert
        data-cycle-timeout=20000
        data-cycle-delay="-10000"
        data-index=2
        ><!-- slides --></div>

    <div class="cycle-slideshow" 
        data-cycle-fx=scrollVert
        data-cycle-timeout=20000
        data-cycle-delay="-5000"
        data-cycle-reverse=true
        data-index=4
        ><!-- slides --></div>

    <div class="cycle-slideshow" 
        data-cycle-fx=scrollHorz
        data-cycle-timeout=20000
        data-cycle-delay="0"
        data-index=3
        ><!-- slides --></div>
</div>

http://jsfiddle.net/mblase75/m4a7X/