如何在 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

这是一个使用 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 2

您可以使用调用其自身 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 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/