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

循环2同步幻灯片显示幻灯片循环之间的延迟

1 个答案: