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

在我看来，Jon Raasch的简单jquery幻灯片是绝对经典。我已经看到它在许多网站上使用过。

http://jonraasch.com/blog/a-simple-jquery-slideshow

他的例子使用了淡入淡出，但是你可以将它改成幻灯片，甚至可以很容易地将其烧掉。

Answer 2

您可以使用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>

Answer 3

http://www.dwuser.com/education/content/creating-a-jquery-image-scroller/

只是使用jquery的图像滚动器教程的一个示例。

只是谷歌“jquery图像滚动条”然后如果你还有其他问题回来看看我们：）

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

3 个答案: