1

画像スライダーにjQueryCyclePluginを使用しています。私が探しているのは次のようなものです。

image1.jpg>>フェードアウト>>空白のフレームを1秒間押し続けます>>フェードインimage2.jpg>>繰り返します

次のフェードアニメーションが開始するまでの遅延、または2つのスライドトランジション間の間隔を制御するにはどうすればよいですか？

つまり、最初のスライド画像が完全にフェードアウトしたら、2番目の画像が実際にフェードインアニメーションを開始する前に、1〜2秒間一時停止する必要があります。

**ポケットベルまたは次/前のリンクでスライドを変更するときに、これを機能させる必要があります。

sync：0を回して、2つのスライド間の同時フェード遷移を停止しようとしましたが、探していたものとは異なります。

アドバイスをいただければ幸いです。

4

2 に答える 2

3

現在のスライドをフェードアウトし、待機してから次のスライドでフェードアウトするカスタムトランジションを定義できます。

以下よりも完全な例については、http：//jsfiddle.net/QGRv9/1/を参照してください。

$.fn.cycle.transitions.fadeOutWaitFadeIn = function($cont, $slides, opts) {
    opts.fxFn = function(curr, next, opts, after) {
        $(curr).fadeOut(opts.fadeSpeed, function() {
            $(next).delay(opts.delayBetweenFades).fadeIn(opts.fadeSpeed, function() {
                after();              
            });
        });
    };
};

$(function() {
    $('#slideshow').cycle({
        fx: 'fadeOutWaitFadeIn',
        fadeSpeed: 500,
        delayBetweenFades: 2000,
        //The timeout value includes the fade speed (twice) and delay between fades.
        //e.g. For a 3000 ms timeout, use 3000 + 500 * 2 + 2000 = 6000.
        timeout: 6000
    });
});

私はおそらくここで何か間違ったことをしていることに注意してください。タイムアウトに他の値を含める必要はありません。小さな問題も1つあります。最初のスライドは、3000ミリ秒ではなく6000ミリ秒で表示されます。

于 2011-05-23T01:01:44.073 に答える
0

1つの方法は、各画像の後に空白のスライドを挿入することです。次に、timeoutFnオプションを使用して、スライドが画像であるか空白のスライドであるかに応じて、異なるタイムアウト値を指定できます。

画像が5秒間表示され、空白のスライドが2秒間表示される例を次に示します。

http://jsfiddle.net/7jJe3/

<div id="slideshow">
    <img src="image1.jpg" />
    <span></span>
    <img src="image2.jpg" />
    <span></span>
    <img src="image3.jpg" />
    <span></span>
</div>

function timeoutfn(currSlideElement, nextSlideElement, options, forwardFlag) {
    var imgtime = 5000;
    var blanktime = 2000;
    if ($(currSlideElement).is('img'))
        return imgtime;
    return blanktime;
};

$(function() {
    $('#slideshow').cycle({
        fx: 'fade',
        speed: 400,
        timeoutFn: timeoutfn
    });
});
于 2011-05-21T09:11:16.453 に答える