0

たとえば、9枚の画像があり、最初から3枚が表示されています。私はそれらを別の画像に一度ずつ順番にフェードさせたいと思っています。

このバージョンでは、タイミングの初期化で区切られた 3 つのサイクル呼び出しがあります。私が見つけたのは、3 つの異なるサイクルを使用すると、時間が経過するほど、タイミング効果がフェージング画像と重なってうまくいかないことです。これは 1 つのサイクル アニメーションで解決できると思いますが、その方法がわかりません。解決策はありますか？

HTML:

<div class="container">
    <ul class="first">
        <li><img width="200" height="200" src="http://cloud.github.com/downloads/malsup/cycle/beach1.jpg" /></li>
        <li><img width="200" height="200" src="http://cloud.github.com/downloads/malsup/cycle/beach2.jpg" /></li>
        <li><img width="200" height="200" src="http://cloud.github.com/downloads/malsup/cycle/beach3.jpg" /></li>
    </ul>
    <ul class="second">
        <li><img width="200" height="200" src="http://static.blogo.it/gamesblog/test-drive-unlimited-2-13/Image00001.jpg" /></li>
        <li><img width="200" height="200" src="http://static.blogo.it/gamesblog/test-drive-unlimited-2-13/Image00002.jpg" /></li>
        <li><img width="200" height="200" src="http://static.blogo.it/gamesblog/test-drive-unlimited-2-13/Image00003.jpg" /></li>
    </ul>
    <ul class="third">
        <li><img width="200" height="200" src="http://static.blogo.it/gamesblog/test-drive-unlimited-2-13/Image00004.jpg" /></li>
        <li><img width="200" height="200" src="http://static.blogo.it/gamesblog/test-drive-unlimited-2-13/Image00005.jpg" /></li>
        <li><img width="200" height="200" src="http://static.blogo.it/gamesblog/test-drive-unlimited-2-13/Image00006.jpg" /></li>
    </ul>
</div>

JS:

jQuery('.first').cycle({
    fx:     'fade',
    delay:  -1000
});
jQuery('.second').cycle({
    fx:     'fade',
    delay:  -2000
});
jQuery('.third').cycle({
    fx:     'fade',
    delay:  -3000
});

編集: ここで少し異なる要求があります: 3 つの遷移、遷移間の一時停止時間

4

1 に答える 1

1

トランジションの最後にコールバックを追加できます。

jQuery('.first').cycle({
    fx:     'fade',
    delay:  -1000,
    after: function(){change('.second')}
});
jQuery('.second').cycle({
    fx:     'fade',
    timeout: 0,
    after: function(){change('.third')}
});
jQuery('.third').cycle({
    fx:     'fade',
    timeout: 0,
});

function change(what)
{
    jQuery(what).cycle("next");
}

JSFiddle: http://jsfiddle.net/c7UXM/

于 2013-02-19T15:32:12.803 に答える