質問
ヘイは、すべて、私は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; };
解決
あなたが「ループ」の最後に到達し、実行時に2つのことが起こっている。
if( i == 6 ) { i = 0; };
まず、あなたはi + 1
が今0であるので、第二の画像ではなく、最初にある、i
に退色しています。
第二に、あなたは、さえ見えない最初の画像を、i
をフェードアウトされています。表示されている最後の画像がi + 1
6た画像7であった。
だから、最後の画像を隠したことがない、と最初の画像を示すことはありませんしています。私にとっては本当に迅速な解決にはフェードアウト文を作るために実行する最初の(私はまだ現在の画像に「ポインティング」です)と「ループ」は終了したときに代わりに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++;
};
しかし、これは(フェード文は現在の論理で分離されているので、私は推測する)ループをやり直すとき遷移の流れを中断するように見えるん。そのための簡単な修正がcurrent
とnext
変数を導入し、最初にすべてのロジックをやって、フェード文でこれらの変数を使用するのと同じくらい簡単である必要があります。
所属していません StackOverflow