jQuery 轮播图单独控制每张图停留时间 数组 完整代码

以下是一个jQuery轮播图的完整代码，可以单独控制每张图的停留时间：

HTML代码：

<div class="slider">
  <ul class="slides">
    <li><img src="img1.jpg"></li>
    <li><img src="img2.jpg"></li>
    <li><img src="img3.jpg"></li>
  </ul>
</div>

CSS代码：

.slider {
  position: relative;
  overflow: hidden;
  width: 100%;
}

.slides {
  display: block;
  width: 300%;
  margin: 0;
  padding: 0;
}

.slides li {
  position: relative;
  float: left;
  width: 33.333%;
  list-style: none;
}

.slider-nav {
  position: absolute;
  bottom: 10px;
  left: 50%;
  transform: translateX(-50%);
  z-index: 1;
}

.slider-nav a {
  display: inline-block;
  margin: 0 5px;
  width: 10px;
  height: 10px;
  border-radius: 50%;
  background-color: #000;
}

.slider-nav a.active {
  background-color: #fff;
}

JavaScript代码：

$(document).ready(function() {

  var slideCount = $('.slider ul.slides li').length;
  var slideWidth = $('.slider ul.slides li').width();
  var slideHeight = $('.slider ul.slides li').height();
  var sliderUlWidth = slideCount * slideWidth;
  var currentSlide = 0;
  
  var slideIntervals = [2000, 3000, 4000]; // 设置每张图的停留时间
  var slideIntervalIndex = 0;

  $('.slider').css({ width: slideWidth, height: slideHeight });

  $('.slider ul.slides').css({ width: sliderUlWidth, marginLeft: -slideWidth });

  $('.slider ul.slides li:last-child').prependTo('.slider ul.slides');

  function moveLeft() {
    slideIntervalIndex = (slideIntervalIndex + 1) % slideIntervals.length; // 计算下一张图的停留时间
    $('.slider ul.slides').animate({
      left: +slideWidth
    }, slideIntervals[slideIntervalIndex], function() {
      $('.slider ul.slides li:last-child').prependTo('.slider ul.slides');
      $('.slider ul.slides').css('left', '');
      currentSlide = (currentSlide - 1) % slideCount;
      updateNav();
    });
  };

  function moveRight() {
    slideIntervalIndex = (slideIntervalIndex + 1) % slideIntervals.length; // 计算下一张图的停留时间
    $('.slider ul.slides').animate({
      left: -slideWidth
    }, slideIntervals[slideIntervalIndex], function() {
      $('.slider ul.slides li:first-child').appendTo('.slider ul.slides');
      $('.slider ul.slides').css('left', '');
      currentSlide = (currentSlide + 1) % slideCount;
      updateNav();
    });
  };

  function updateNav() {
    $('.slider-nav a').removeClass('active');
    $('.slider-nav a').eq(currentSlide).addClass('active');
  }

  $('.slider-nav a').click(function() {
    var navIndex = $(this).index();
    if (navIndex < currentSlide) {
      var moves = currentSlide - navIndex;
      for (var i = 0; i < moves; i++) {
        moveLeft();
      }
    } else if (navIndex > currentSlide) {
      var moves = navIndex - currentSlide;
      for (var i = 0; i < moves; i++) {
        moveRight();
      }
    }
  });

  setInterval(function() {
    moveRight();
  }, slideIntervals[slideIntervalIndex]); // 初始停留时间为第一张图的时间

});

在JavaScript代码中，我们定义了一个数组`slideIntervals`，用于存储每张图的停留时间。我们还定义了一个变量`slideIntervalIndex`，用于记录当前应该使用的停留时间的索引。

在`moveLeft()`和`moveRight()`函数中，我们使用`slideIntervals[slideIntervalIndex]`来设置当前图的停留时间，并在函数结束时更新`slideIntervalIndex`，以便下一张图使用下一个停留时间。

在`setInterval()`函数中，我们使用`slideIntervals[slideIntervalIndex]`来设置初始停留时间，以便第一张图使用正确的停留时间。