jquery 设置间隔淡入淡出循环

Question

我正在尝试根据 CSS-tricks Auto-Playing Slideshow 制作我自己的简单淡入淡出循环。我需要考虑到页面中不止一个的可能性。

出于某种原因，我的幻灯片没有超过第二张。也许是因为把它放在一个函数中？

$('.jCaroFade').each(createFader);
function createFader (i, elem) {
    var track = $(elem);
    var firstSlide = track.find('.slide').eq(0);

    firstSlide.nextAll().hide();
    setInterval(function() { 
      firstSlide
      .fadeOut(500)
      .next()
      .fadeIn(500)
      .end()
      .appendTo(track);
    },  3000);

}

Fiddle: https://jsfiddle.net/L66v8oxv/

谢谢！

Answer 1

您没有更改第一张幻灯片参考

$('.jCaroFade').each(createFader);

function createFader(i, elem) {
  var track = $(elem);
  var firstSlide = track.find('.slide').eq(0);
  var loop = 0;

  firstSlide.nextAll().hide();
  setInterval(function() {
    loop++;
    firstSlide = firstSlide.fadeOut(500, function() {
        $(this).appendTo(track);
      })
      .next()
      .fadeIn(500);
  }, 3000);

}

html,
body {
  margin: 0;
  padding: 0;
  width: 100%;
  height: 100%;
  font-family: sans;
}
.track {
  position: relative;
  height: 400px;
  width: 100%;
}
.slide {
  position: absolute;
  top: 0;
  left: 0;
  right: 0;
  bottom: 0;
  background-position: center center;
  -webkit-background-size: cover;
  -moz-background-size: cover;
  -o-background-size: cover;
  background-size: cover;
}
.ipsum {
  display: inline-block;
  padding: 10px;
  background-color: rgba(255, 255, 255, .75);
}

<script src="https://ajax.googleapis.com/ajax/libs/jquery/1.11.1/jquery.min.js"></script>
<div class="jCaroFade track">
  <!-- Slides -->
  <div class="slide" style="background-image:url('https://c1.staticflickr.com/1/550/20180902929_88c507f552_h.jpg');">
    <p class="ipsum">SLIDE ONE</p>
  </div>
  <div class="slide" style="background-image:url('https://c1.staticflickr.com/1/277/19726574813_cf2aa22221_b.jpg');">
    <p class="ipsum">SLIDE TWO</p>
  </div>
  <div class="slide" style="background-image:url('https://c1.staticflickr.com/1/488/20178281609_c1e34be0b2_b.jpg');">
    <p class="ipsum">SLIDE THREE</p>
  </div>
  <div class="slide" style="background-image:url('https://c1.staticflickr.com/1/414/19744665244_c099ce816c_h.jpg');">
    <p class="ipsum">SLIDE FOUR</p>
  </div>
</div>

jquery 设置间隔淡入淡出循环

jquery fade loop with setinterval

jquery

slideshow

setinterval

fadein