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每个幻灯片的 20s 组合使用。您可以设置负延迟，因此第一个幻灯片在五秒后开始，然后再等待二十秒。

<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/