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个类，因为您只有那些DIV在一个共同的父级中。
不要使用内联样式！使用您的stylesheet。
请勿使用固定宽度（px）。使用％进行响应式设计。
2000 * 1331px图片是不适合网络。特别不适用于移动设备。关心您的用户带宽。将背景图像设置为cover时不需要担心它被repeat编辑。
使您的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>

Answer 2

首先将firstDiv，lastDiv放在自己的变量中。

然后你需要这样的东西

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

告诉我你是否需要更多帮助。

Answer 3

您需要使用2次超时才能循环播放。超时仅触发一次。 FadeOutDivs函数倒计时，每次设置超时以调用自身。然后在零时，淡入淡出将调用fadeInDivs设置为超时，从而开始整个循环。

我已经在codepen上运行了这个。

$(document).ready(function () {

    var interval = 2000;
    var fadeDuration = 400;
    var allImages = $('.bckgnd');
    var count = allImages.length - 1;
    var imageCount = allImages.length;

    setTimeout(fadeOutDivs, interval);

    function fadeOutDivs() {

        allImages.eq(count).fadeOut(fadeDuration);

        console.log(count);

        if (count > 1) {

            count--;

            setTimeout(fadeOutDivs, interval);

        } else {

            count = allImages.length - 1;

            setTimeout(fadeInDivs, interval)
        }

    }

    function fadeInDivs() {

        allImages.fadeIn(fadeDuration);

        setTimeout(fadeOutDivs, interval);

    }

});

如何制作淡入淡出的幻灯片循环？

3 个答案: