javascript - jQuery - 重复图像

Question

我在 jQuery 中有这段代码。我有 6 个图像的代码，但是当它是 6 时它就停止了。我想重复 1 中的内容。我该怎么做？

<script type="text/javascript">
$(document).ready(function() {

    var $slider = $('#slider'),
        $prev = $('#prev'),
        $next = $('#next'),
        $slide = $slider.find('div');

    var currentSlide = 0,
        allSlides = $slider.find('div').length - 1; // index start from 0


    $slider.find('div').eq(0).show();

    function nextSlide() {

      if(currentSlide < allSlides) {

          $slide.eq(currentSlide).fadeOut('slow');
          $slide.eq(currentSlide + 1).fadeIn('slow');

          currentSlide+=1;
      }

    }
     setInterval(function() {
      nextSlide();
}, 5000);
    function prevSlide() {

      if(currentSlide > 0) {

          $slide.eq(currentSlide).fadeOut(400);
          $slide.eq(currentSlide - 1).fadeIn(400);

          currentSlide-=1;
      }
    }
  $next.on('click', nextSlide);
  $prev.on('click', prevSlide);

});
</script>

Answer 1

只需将 currentSlide 设置为幻灯片，即可从该幻灯片开始

function nextSlide() {

  if(currentSlide < allSlides) {

      $slide.eq(currentSlide).fadeOut('slow');
      $slide.eq(currentSlide + 1).fadeIn('slow');

      currentSlide+=1;
  }else{
      currentSlide = 0;
  }

}

对于上一张，将currentSlide设置为最后一张

function prevSlide() {

  if(currentSlide > 0) {

      $slide.eq(currentSlide).fadeOut(400);
      $slide.eq(currentSlide - 1).fadeIn(400);

      currentSlide-=1;
  }else {
      currentSlide = allSlides-1;      
  }
}