带有无限循环的jQuery滑块

Question

如何使用无限循环制作这个简单的滑块？

$(function () {
    $('.js-banner-slide div').hide(); // hide all slides
    $('.js-banner-slide div:first-child').show(); // show first slide
        setInterval(function () {
    $('.js-banner-slide div:first-child').fadeOut(500)
    .next('div').fadeIn(1000).appendTo('.slideshow');
    },3000); // slide duration
});

jsFiddle

Answer 1

你可以做一些小改动，比如

＆＃13;

＆＃13;

$(function() {
  $('.js-banner-slide div').hide(); // hide all slides
  $('.js-banner-slide div:first-child').show(); // show first slide
  setInterval(function() {
    var $x = $('.js-banner-slide div:first-child').fadeOut(500, function() {
        $(this).appendTo('.js-banner-slide')
      })
      .next('div').fadeIn(1000);
  }, 3000); // slide duration
});

＆＃13;

.js-banner-slide {
  position: relative;
}
.banner-slide {
  position: absolute;
}

＆＃13;

<script src="https://ajax.googleapis.com/ajax/libs/jquery/1.11.1/jquery.min.js"></script>
<div class="js-banner-slide">

  <div class="banner-slide">
    <h2>John Smith.</h2>
    <p>Lorem ipsum dolor sit amet, consectetur adipisicing elit. Nostrum, totam.</p>
  </div>

  <div class="banner-slide">
    <h2>Alan PHP Guy</h2>
    <p>Lorem ipsum dolor sit amet, consectetur adipisicing elit. Nostrum, totam.</p>
  </div>

</div>

＆＃13;

＆＃13;

＆＃13;