週期2同步幻燈片與幻燈片放映週期之間的延遲

Question

當使用來自週期2 API的同步放映幻燈片示例時，我試圖在幻燈片之間添加一個連續的延遲;例如：5s，10s，15s，20s ...即第一div.cycle-slideshow將在5秒內開始，然後第二個將在10秒後觸發，然後下一個15秒，接下來20秒，然後第一個將在25秒再次開始，循環繼續。 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選項搭配20S每個幻燈片的timeout。您可以設置負延遲，因此第一個幻燈片放映會在五秒鐘後開始，然後再等待二十分鐘。

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