javascript - 使用 JQuery 在图像之间自动滑动 - 与我的 html

Question

我有这个 html 代码:

<div class="slider" id="mySlider" >
  <div class="slide-group">
    <div class="slide">
      <img src="images/image1.jpg">
    </div>
    <div class="slide">
      <img src="images/image2.jpg">
    </div>
    <div class="slide">
      <img src="images/image3.jpg">
    </div>
  </div>
</div>

每个带有类幻灯片的 div 后面都有一个 img，如上面所示。

使用jquery，如何让它在图像之间自动滑动？

Answer 1

您可以使用setInterval()循环浏览幻灯片。

设置为在 x 时间后移动到下一张幻灯片

下面的代码片段无法完全正常运行，但它为您提供了一个总体思路

$(document).ready(function(){
  window.setInterval(nextSlide, 1000);
});

function nextSlide() {
  var $cur = $('.slide.active');
  var $next = $cur.next();
  if(!$next) $next = $('.slide-group').children()[0];
  console.log($next);
  $cur.removeClass('active');
  $next.addClass('active');
}

.slide {
  display: none;  
}

.slide.active {
  display: block;
}

<script src="https://ajax.googleapis.com/ajax/libs/jquery/1.9.1/jquery.min.js"></script>
<div class="slider" id="mySlider" >
  <div class="slide-group">
    <div class="slide active">
      SLIDE 1
    </div>
    <div class="slide">
      SLIDE 2
    </div>
    <div class="slide">
      SLIDE 3
    </div>
  </div>
</div>