1

cycle2 API の同期スライド ショーの例を使用する場合、スライド ショー間にシーケンシャルな遅延を追加しようとしています。例: 5 秒、10 秒、15 秒、20 秒 ... つまり、最初の div.cycle-slideshow が 5 秒で開始され、2 番目が 10 秒でトリガーされ、次に 15 秒でトリガーされ、次に 20 秒でトリガーされ、最初の div.cycle-slideshow が 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>
4

1 に答える 1

0

このオプションは、スライドショーごとに 20 の と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/

于 2014-03-05T16:26:12.860 に答える