当使用来自 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>
最佳答案
将 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>
关于javascript - 循环 2 同步幻灯片,幻灯片循环之间有延迟,我们在Stack Overflow上找到一个类似的问题: https://stackoverflow.com/questions/22203078/