javascript - 如何制作淡入淡出幻灯片循环播放？

Question

我正在使用 javascript 每隔几秒更改我的 css 类背景图像。它工作得很好，问题是它在显示最后一张图像后就停止了。谁能告诉我要在这段代码中添加什么，以便它能够不断循环？

$(window).load(function() {
  $(document).ready(function() {
    setInterval(fadeDivs, 5000); //call it every 2 seconds
    function fadeDivs() {
      var visibleDiv = $('.bckgnd:visible:first'); //find first visible div
      visibleDiv.fadeOut(400, function() { //fade out first visible div
        var allDivs = visibleDiv.parent().children(); //all divs to fade out / in
        var nextDivIndex = (allDivs.index(visibleDiv) + 1) % allDivs.length; //index of next div that comes after visible div
        var nextdiv = allDivs.eq(nextDivIndex); //find the next visible div

        var lastDiv = $('.backgnd3');
        var firstDiv = $('.backgnd1');
        if (currentDiv != lastDiv) {
          var nextdiv = allDivs.eq(nextDivIndex); //find the next visible div
        } else {
          var nextdiv = firstDiv; //the next div will be the first div, resulting in a loop
        }
        nextdiv.fadeIn(400); //fade it in
      });
    };
  });
});

.backgnd1 {
  width: 100%;
  height: 452px;
  background: url ('http://quaaoutlodge.com/sites/all/themes/marinelli/img/backgrounds/backgnd1.jpg');
  background-size: cover;
  background-repeat: no-repeat;
  background-color: #000;
}

.backgnd2 {
  width: 100%;
  height: 452px;
  background-image: url ('http://quaaoutlodge.com/sites/all/themes/marinelli/img/backgrounds/the_lodge.jpg');
  background-size: cover;
  background-repeat: no-repeat;
  background-color: #000;
}

.backgnd3 {
  width: 100%;
  height: 452px;
  background-image: url('http://quaaoutlodge.com/sites/all/themes/marinelli/img/backgrounds/getting_here.jpg');
  background-size: cover;
  background-repeat: no-repeat;
  background-color: #000;
}

.index_roof_background {
  background-color: #000;
  width: 1600px;
  height: 452px;
  margin: 0px;
  padding-top: 0px;
  margin-left: auto;
  margin-right: auto;
}

<div class="index_roof_background">
  <div style="position:absolute; z-index: 2;display:block; background-color:#000;" class="bckgnd backgnd1"></div>
  <div style="position:absolute; z-index: 2;display:none; background-color:#000;" class="bckgnd backgnd2"></div>
  <div style="position:absolute; z-index: 2;display:none; background-color:#000;" class="bckgnd backgnd3"></div>
</div>

Answer 1

^{更好的方法:}

• 您不需要所有这些 backgnd2 类，因为您在公共(public)父级中只有这些 DIV。
• 不要使用内联样式!使用您的样式表。
• 不要使用固定宽度 (px)。使用 % 进行响应式设计。
• 2000*1331px 图像为不适合网络。特别不适用于移动设备。关心您的用户的带宽。当设置背景图像来覆盖你时无需担心它会被重复编辑。
• 让你的JS对元素的索引更加灵活，使用length来计算你的元素。创建一个“当前索引计数器”，对其进行迭代并递增它并使用 % 重置(提醒)。
• 为了获得更好的用户体验，允许用户悬停时暂停。

这是一个示例:

jQuery(function($) { // DOM ready. $ alias in scope.

  $('.gallery').each(function() {

    var $gal = $(this),
      $sli = $gal.find(">*"),
      tot = $sli.length,
      c = 0,
      itv = null;

    $sli.hide().eq(c).show(); // Hide all but first slide

    function anim() {
      c = ++c % tot; // increment/reset counter
      $sli.fadeOut().eq(c).stop().fadeIn();
    }

    function play() {
      itv = setInterval(anim, 3000);
    }

    function pause() {
      clearInterval(itv);
    }

    $gal.hover(pause, play); // Pause on hover
    play();                  // Start loop

  });

});

.gallery {
  position: relative;
  height: 200px;
}

.gallery>* {
  position: absolute;
  top: 0;
  left: 0;
  width: 100%;
  height: 100%;
  background: none 50%;
  background-size: cover;
}

<div class="gallery">
  <div style="background-image:url(http://placehold.it/800x600/0bf?text=1)"></div>
  <div style="background-image:url(http://placehold.it/800x600/f0b?text=2)"></div>
  <div style="background-image:url(http://placehold.it/800x600/0fb?text=3)"></div>
</div>


<script src="https://ajax.googleapis.com/ajax/libs/jquery/2.1.1/jquery.min.js"></script>