0

jQuery で簡単なフェード ギャラリーを作成しました。基本的には一連の画像をループし、次から次へとフェードします。予測どおり、最後の画像に到達するまでは完全に機能し、最後から最初の画像にフェードせず、表示するだけです。

ここに私のjQueryがあります

$(document).ready(function(){

Zindex = 99999;
i = 0;

$(".flash img").each(function(){
    $(this).css({
        'position':'absolute',
        'z-index':Zindex,
        'display':'none'
    });
    Zindex--;
});

$(".flash img:first").show();

doFade = function(){        
    if( i == 6 ) { i = 0; };        
    $(".flash img:eq("+parseInt(i+1)+")").fadeIn(100);
    $(".flash img:eq("+parseInt(i)+")").fadeOut(1000);      
    setTimeout("doFade()", 2000);
    i++;
};

doFade();

});

注: 7 つの画像しかありません。

そして私のマークアップ

<div class='flash'>
    <img src="img/gallery/picture1.jpg" width="780" height="253" alt="Picture1">
    <img src="img/gallery/picture2.jpg" width="780" height="253" alt="Picture2">
    <img src="img/gallery/picture3.jpg" width="780" height="253" alt="Picture3">
    <img src="img/gallery/picture4.jpg" width="780" height="253" alt="Picture4">
    <img src="img/gallery/picture5.jpg" width="780" height="253" alt="Picture5">
    <img src="img/gallery/picture6.jpg" width="780" height="253" alt="Picture6">
    <img src="img/gallery/picture7.jpg" width="780" height="253" alt="Picture7">
</div>

問題はラインにあると思います

if( i == 6 ) { i = 0; };
4

1 に答える 1

3

「ループ」の終わりに到達して実行すると、2つのことが起こります。

if( i == 6 ) { i = 0; };

まず、フェードインします。これは、現在0i + 1であるため、最初の画像ではなく2番目の画像です。i

次に、最初の画像がフェードアウトしますがi、これは表示されていません。最後に表示された画像は画像7で、i + 16でした。

したがって、最後の画像を非表示にしたり、最初の画像を表示したりすることはありません。私にとって本当に迅速な解決策は、フェードアウトステートメントを最初に実行し（私はまだ現在の画像を「指し示している」）、「ループ」が終了するときではi = -1なく設定することでした。0

doFade = function(){
    $(".flash img:eq("+parseInt(i)+")").fadeOut(1000); 
    if( i == 6 ) { i = -1; }
    $(".flash img:eq("+parseInt(i+1)+")").fadeIn(100);             
    setTimeout("doFade()", 2000);
    i++;
};

ただし、これはループを開始するときに遷移のフローを中断するように見えます（fadeステートメントがロジックによって分離されているためだと思います）。そのための簡単な修正は、fadeステートメントでこれらの変数を使用して、変数を導入し、最初にすべてのロジックを実行するのcurrentと同じくらい簡単なはずです。next

于 2009-11-06T18:42:38.550 に答える