jquery 轮播图 函数控制每个图片停留显示时间 完整代码

以下是一个基本的jquery轮播图，可以通过修改setInterval函数的参数来控制每个图片停留显示的时间。

HTML代码：

<div class="slider">
  <div class="slider-wrapper">
    <img src="image1.jpg" alt="image1" />
    <img src="image2.jpg" alt="image2" />
    <img src="image3.jpg" alt="image3" />
  </div>
</div>

CSS代码：

.slider {
  position: relative;
  overflow: hidden;
}
.slider-wrapper {
  position: absolute;
  top: 0;
  left: 0;
  width: 300%;
  transition: transform 0.5s ease;
}
.slider-wrapper img {
  display: inline-block;
  width: 33.33%;
}

jQuery代码：

$(function() {
  var slideWidth = $('.slider-wrapper img').width();
  var currentSlide = 0;
  var sliderInterval = setInterval(nextSlide, 3000);

  function nextSlide() {
    currentSlide++;
    if (currentSlide >= $('.slider-wrapper img').length) {
      currentSlide = 0;
    }
    $('.slider-wrapper').css('transform', 'translateX(-' + currentSlide * slideWidth + 'px)');
  }

  $('.slider').hover(function() {
    clearInterval(sliderInterval);
  }, function() {
    sliderInterval = setInterval(nextSlide, 3000);
  });
});

在上面的代码中，我们使用了setInterval函数来实现轮播，每个图片停留的时间为3秒。我们还添加了hover事件，当鼠标放在轮播图上时停止轮播，当鼠标移开时继续轮播。