jQuery - 重复图像

jQuery - repeat images

本文关键字：图像 jQuery      更新时间：2023-09-26

我在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>

只需将currentSlide设置为滑动，您就是从中开始的

function nextSlide() {
  if(currentSlide < allSlides) {
      $slide.eq(currentSlide).fadeOut('slow');
      $slide.eq(currentSlide + 1).fadeIn('slow');
      currentSlide+=1;
  }else{
      currentSlide = 0;
  }
}

对于prev将currentSlide设置为最后一个

function prevSlide() {
  if(currentSlide > 0) {
      $slide.eq(currentSlide).fadeOut(400);
      $slide.eq(currentSlide - 1).fadeIn(400);
      currentSlide-=1;
  }else {
      currentSlide = allSlides-1;      
  }
}
相关文章：