javascript - 如何在 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);

})

fiddle :https:https://jsfiddle.net/4bhv9w80/1/