2011-07-17 13 views
1

jQuery画像回転子に小さな問題があります。 基本的に、私の回転子は、すべての画像がロードされているかどうかをチェックし、そうであれば最初のものを上のeq(5)に表示し、後に1を表示する必要があります。私のスクリプトは、最初のイメージで動作しますが、どのイメージをどのように循環させて繰り返すかはわかりません。 基本的に、無限ループ内のすべての画像を回転子サイクルにする方法を知りたいだけです。最初の画像を変更した後にjQuery画像回転子が停止する

HTML:

<div id="reel"> 
<img src="images/reel6.jpg" /> 
<img src="images/reel5.jpg" /> 
<img src="images/reel4.jpg" /> 
<img src="images/reel3.jpg" /> 
<img src="images/reel2.jpg" /> 
<img src="images/reel1.jpg" /> 
</div> 

のjQuery:

$(document).ready(function(){ 
$("#reel img").hide(); 
eq=5; 
$("#reel img").load(function(){ 
function promeni(eq){ 
    $("#reel img").eq(eq).show(); 
    $("#reel img").eq(eq-1).show(); 
    $("#reel img").eq(eq).delay(2000).fadeOut(2000); 
} 
promeni(eq); 
}); 
}); 

答えて

2

このような何かはトリックを行う必要があります。

$("#reel img").hide(); 
var counter = $("#reel img").length; 

var i = setInterval(function() { 
      $("#reel img").eq(counter - 1).show(); 
      $("#reel img:visible").fadeOut(2000); 
      counter--; 
      if (counter === 0) { 
       counter = 5; 
      } 
     }, 2000); 

安っぽいデモ:http://jsfiddle.net/tJvLy/

+0

あなたの解決策は、非常に便利ですb ut setintervalは何らかの理由で遅く動作し、私のページを読み込むたびに、最初のイメージがあるはずの空白が表示されます。setIntervalが動作するまで、少し速度を上げる方法はありますか? – Mentalhead

関連する問題