2012-03-17 11 views
0

画像付きの自動スライドショーを作成する必要があります。すべての画像をbodyタグの別の位置に配置したいので、すべての画像に対してdivを1つ作成しました。 私はそれが動作するすべての画像jQueryの再帰画像each()

<div id="img1" class="images" ><img src="img/works/img1.jpg"/></div> 
<div id="img2" class="images" ><img src="img/works/img2.jpg"/></div> 
... 


<script> 
var arr = ["img1", "img2",..., "img22" ]; 

var $fade_in=1500; 

$.each(arr, function images(i) { 
$("#" + this).delay(i*1000).show($fade_in); 
});  
</script> 

を表示する)(それぞれのjQueryを使用しています。さて、どのように再帰関数を得ることができますか?私はそれらのリンク、 http://jsfiddle.net/maniator/F6nJu/1/ http://jsfiddle.net/JJfKM/138/ を見てきましたが、私は私のコードでは、それらを適用することはできません無限ループ

を必要としています。

私の英語のために残念です。

答えて

2

setInterval()を使用して、スライドを繰り返し実行することができます。

function runSlides() { 
    var index = 0; 
    var imgList$ = $(".images"); 

    setInterval(function() { 
     // hide previous slide 
     imgList$.eq(index).hide(1500); 
     // show next slide 
     ++index; 
     if (index >= imgList$.length) { 
      index = 0; 
     } 
     imgList$.eq(index).show(1500); 
    }, 2500);  
} 

そして、あなたのコードの中でいくつかの点で、あなたが使用してこれを呼び出します。

runSlides(); 

をこの例では、私は前のスライドを隠され、各区間で、次のいずれかを示してきましたこれはあなたがあなたの例でやったことではありませんが、何度も何度も何度も何度も繰り返す必要があると思います。

ここでの動作例:http://jsfiddle.net/jfriend00/4STRU/

+0

はい、それは正しいです、私はまたそれを示した後イメージを隠す必要がありますが、それは私のためには動作しません。 画像はそれぞれの位置にありますが、すべてが交互に表示されます。 –

+0

@ user1275857 - あなたは私に質問していましたか?私はあなたのコメントを理解していませんでした。 – jfriend00

+0

@Franziska - 正しい、私の例では、jQueryを使ってページから直接画像のリストを生成するので、配列は必要ありません。 – jfriend00