jQuery 轮播图 单独控制图片显示时间 完整注释 代码

HTML结构：

<div class="slider">
  <ul class="slider-list">
    <li><img src="img/img1.jpg"></li>
    <li><img src="img/img2.jpg"></li>
    <li><img src="img/img3.jpg"></li>
    <li><img src="img/img4.jpg"></li>
  </ul>
  <div class="slider-nav">
    <ul>
      <li class="active"></li>
      <li></li>
      <li></li>
      <li></li>
    </ul>
  </div>
</div>

CSS样式：

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

.slider-list {
  position: absolute;
  top: 0;
  left: 0;
  width: 100%;
  height: 100%;
  margin: 0;
  padding: 0;
}

.slider-list li {
  position: absolute;
  top: 0;
  left: 0;
  width: 100%;
  height: 100%;
  list-style: none;
  margin: 0;
  padding: 0;
  opacity: 0;
  z-index: 1;
  transition: opacity 1s ease-in-out;
}

.slider-list li.active {
  opacity: 1;
  z-index: 2;
}

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

.slider-nav ul {
  list-style: none;
  margin: 0;
  padding: 0;
  display: flex;
}

.slider-nav ul li {
  width: 20px;
  height: 20px;
  border-radius: 50%;
  background-color: #fff;
  margin-right: 10px;
  cursor: pointer;
}

.slider-nav ul li.active {
  background-color: #333;
}

jQuery代码：

$(function() {
  var $slider = $('.slider');
  var $sliderList = $slider.find('.slider-list');
  var $sliderLi = $sliderList.find('li');
  var $sliderNav = $slider.find('.slider-nav');
  var $sliderNavLi = $sliderNav.find('li');
  var len = $sliderLi.length;
  var index = 0;
  var intervalId = null;

  // 初始化
  $sliderLi.eq(index).addClass('active');
  $sliderNavLi.eq(index).addClass('active');

  // 自动轮播
  function autoPlay() {
    intervalId = setInterval(function() {
      $sliderLi.eq(index).removeClass('active');
      $sliderNavLi.eq(index).removeClass('active');
      index = (index + 1) % len;
      $sliderLi.eq(index).addClass('active');
      $sliderNavLi.eq(index).addClass('active');
    }, 3000);
  }
  autoPlay();

  // 鼠标移入停止轮播，移出继续轮播
  $slider.hover(function() {
    clearInterval(intervalId);
  }, function() {
    autoPlay();
  });

  // 控制图片显示时间，每张图片显示时间不同
  var timeArr = [2000, 3000, 2500, 3500]; // 每张图片显示时间的数组
  $sliderLi.each(function(i, el) {
    $(el).data('time', timeArr[i]); // 将每张图片的显示时间存储在data中
  });

  function playWithTime() {
    intervalId = setInterval(function() {
      $sliderLi.eq(index).removeClass('active');
      $sliderNavLi.eq(index).removeClass('active');
      index = (index + 1) % len;
      $sliderLi.eq(index).addClass('active');
      $sliderNavLi.eq(index).addClass('active');
    }, $sliderLi.eq(index).data('time')); // 根据当前图片的显示时间设置定时器时间
  }
  playWithTime();

});