JQueryでeach（）を3回ループする方法

Question

私はHTML5バナーを作成しており、3つのオーバーラップするバナーをループする必要があります。

var currentDelay; currentDelay = 0; 
var pastItem; pastItem = ""; 

$(".state").each(function() { 
    $(this).delay(currentDelay).fadeIn(); 
    $(this).prev().delay(3000).fadeOut(); 
    currentDelay += 3000; 
}); 

それは動作しますが、一度だけ動作します：

スクリプト私は現在、このようになりますを使用しています。 .stateは各バナーのラッピングクラスです。それらはお互いの上に配置され、互いにやりとりする必要があります。

HTML：

 <div class="state"> 
      <img src="images/img-1.jpg" alt="Last minute ski holidays from £299pp" /> 
      <div class="message"><p>Last minute<br />ski holidays from £299<span>pp</span></p></div> 
     </div> 
     <div class="state"> 
      <img src="images/img-2.jpg" alt="Enjoy free skiing guide & coaching" /> 
      <div class="message blue"><p>Enjoy free<br />skiing guide<br />&amp; coaching</p></div> 
     </div> 
     <div class="state"> 
      <img src="images/img-3.jpg" alt="Last minute ski holidays from £299pp" /> 
      <div class="message grey"><p>Limited availability<br /><span class="sub-mes">Don't miss out</span></p></div> 
      <p class="call-to-action">Find out more</p> 
     </div> 

は、私はその後、ちょうど最後のフレームで停止して、3回のラウンドループすることができます方法はありますか？最後のバナーは、最初のフレームにフェードバックしてシームレスに見える必要があります。この上でいくつかの助けのための

ビッグ感謝:)ここ

乾杯

ロブ

Answer 1

あなたは自己参照機能でこれを行うことができますそれは自分自身を3回呼ぶ。

var sleepTimer = 0; 

(function LoopyLoo(i) { 


    setTimeout(function() { 
    var currentDelay = 0 
    $(".state").fadeOut(); 

    $(".state").each(function() { 
     $(this).delay(currentDelay).fadeIn(); 
     currentDelay += 3000; 
    }); 

    if (--i) { 
     LoopyLoo(i); 
     }// decrement i and call myLoop again if i > 0 
    }, sleepTimer) 

    sleepTimer = 9000; 

})(3); //Times to call the function. 

小規模なCSSへの変更で、素敵な色が追加されましたので、実際に見られます。

.state-con { 
    position: relative; 
} 

.state { 
    display: none; 
    position: absolute; 
    top: 0; 
    left: 0; 
} 

.one { 
    z-index: 1; 
    background-color: red; 
} 

.two { 
    z-index: 2; 
    background-color: blue; 
} 

.three { 
    z-index: 3; 
    background-color: aqua; 
} 

このJSフィドルで動作するすべてを見てください。 https://jsfiddle.net/yojmu6ga/21/

Answer 2

setIntervalを用いる方法です。

私はコードをコメントしていますので、私はそれを説明しても構いません。

JS：

$(document).ready(function() { 
    var currentDelay; currentDelay = 3000; 
    var pastItem; pastItem = ""; 

    var i=0; 

    // interval 
    var cycle = setInterval(function() { 
     // Fade 
     $(".state:eq(" + i + ")").fadeOut(); 
     // Increment 
     i++; 
     // Increase delay 
     currentDelay+=3000; 
     // Check if at last, change to suit wants 
     if(i == $(".state").length) { 
      /* 
      // Loop here 
      $(".state").delay(500).fadeIn(); 
      i=0; 
      */ 
      // Stop interval 
      clearInterval(cycle); // Comment this line if looping 
     } 
    }, currentDelay); 

}) 

フィドルます。https：https://jsfiddle.net/4bhv9w80/1/

Answer 3

希望これはあなたのために働く：

var currentDelay; currentDelay = 0; 

$(".state").each(function() { 
    var $currentElement =$(this); 

    window.setTimeout(function(){ 
     $(".state:visible").fadeOut(); 
     $currentElement.fadeIn(); 
    }, currentDelay); 

    currentDelay += 3000  
}); 

window.setTimeout(function(){ 
    $(".state:visible").fadeOut(); 
    $(".state:first").fadeIn(); 
}, currentDelay); 

https://jsfiddle.net/2k6c1b18/