0

jQueryでeach()ループを連続して実行することは可能ですか?

互いにフェードインおよびフェードアウトする画像のスライドショーがありますが、最後の画像に到達すると停止します。私のコードは以下の通りです：

jQuery

$('.slider-block').each(function(i) {

$(this).delay(4000*i).fadeTo(1000,1);

});

HTML

<div class="slider-block">

<img src="image1.png" />

</div>

<div class="slider-block">

<img src="image2.png" />

</div>

CSS

.slider-block { display: none; position: absolute; top: 0px; left: 0px; }

私の目的は、すべての画像をループしてから、最初の画像に戻って最初からやり直すことです。

HTML と CSS はすべて問題なく動作します。ここでサポートが必要なのは jQuery の部分だけです。

**更新**

提案に基づいて、次のことを試しましたが、これらのどれも最初からループしません。

setTimeout(function(){  

$('.slider-block').each(function(i) { 

$(this).delay(4000*i).fadeTo(1000,1); }); 

} ,4000);

と

setInterval(function(){  

$('.slider-block').each(function(i) { 

$(this).delay(4000*i).fadeTo(1000,1); }); 

} ,4000);

これは私のブラウザをクラッシュさせます

while(true)
{
   $('.slider-block').each(function(i) {

       $(this).delay(4000*i).fadeTo(1000,1);

   });
}
4

4 に答える 4

2

解決： 

function cycleImages(){
    var $active = $('#slider-container .active');
    var $next = ($active.next().length > 0) ? $active.next() : $('.slider-block:first');
      $next.css('z-index',2);//move the next image up the pile
      $active.fadeOut(1500,function(){//fade out the top image
          $active.css('z-index',1).show().removeClass('active');//reset the z-index and unhide the image
          $next.css('z-index',3).addClass('active');//make the next image the top one
      });
}        
$(function(){
    // run every 4s
    setInterval('cycleImages()', 4000);            
});

編集済みの回答 (v2):

上の画像の z-index は「3」です。下に配置されている次の画像は、「2」の z-index を使用しています。そのため、トップ画像をフェードアウトさせることでシームレスにフェードインしているような印象になります。

デモ: http://jsfiddle.net/UhJm6/1/

注:このソリューションは、透過性の問題により、「.png」タイプの画像では機能しません。優先的に JPEG 画像を使用します。

ソース: http://www.simonbattersby.com/blog/simple-jquery-image-crossfade/

于 2013-04-24T11:01:44.433 に答える
1

setTimeout()Javascriptの機能を使用して、無限ループを作成できます。

詳細はこちらをご覧ください。

一時停止したくない場合は、それに応じてタイムアウト時間を設定してください。

または、これを使用できます

While(true)
{
   $('.slider-block').each(function(i) {
       $(this).delay(4000*i).fadeTo(1000,1);
   });
}
于 2013-04-24T10:35:53.497 に答える