jQuery 可重复使用幻灯片 每张图设定不同时间

以下是一个用 jQuery 实现的可重复使用幻灯片，每张图设定不同时间的示例代码：

HTML：

<div class="slider">
  <ul>
    <li><img src="image1.jpg" data-time="3000"></li>
    <li><img src="image2.jpg" data-time="5000"></li>
    <li><img src="image3.jpg" data-time="8000"></li>
  </ul>
</div>

CSS：

.slider {
  position: relative;
  overflow: hidden;
}

.slider ul {
  list-style: none;
  margin: 0;
  padding: 0;
  position: relative;
}

.slider ul li {
  position: absolute;
  top: 0;
  left: 0;
}

.slider ul li img {
  display: block;
  width: 100%;
  height: auto;
}

JavaScript：

$(function() {
  var $slider = $('.slider');
  var $sliderUl = $slider.find('ul');
  var $sliderLi = $sliderUl.find('li');
  var $sliderImg = $sliderLi.find('img');
  var sliderCount = $sliderLi.length;
  var sliderWidth = $slider.width();
  var sliderHeight = $sliderImg.height();
  var sliderTime = [];
  var currentIndex = 0;

  // 获取每张图片的显示时间
  $sliderImg.each(function() {
    sliderTime.push($(this).data('time'));
  });

  // 设置第一张图片的显示时间
  setTimeout(function() {
    slider($sliderLi.eq(currentIndex));
  }, sliderTime[currentIndex]);

  // 切换图片
  function slider($li) {
    $li.fadeIn().siblings().fadeOut();
    currentIndex++;
    if (currentIndex >= sliderCount) {
      currentIndex = 0;
    }
    setTimeout(function() {
      slider($sliderLi.eq(currentIndex));
    }, sliderTime[currentIndex]);
  }

  // 设置容器高度
  $slider.height(sliderHeight);

  // 设置每个 li 的宽度
  $sliderLi.width(sliderWidth);

  // 设置 ul 的宽度
  $sliderUl.width(sliderWidth * sliderCount);
});

以上代码实现了一个简单的幻灯片效果，每张图片设定了不同的显示时间，可以通过修改 HTML 中的 data-time 属性来改变每张图片的显示时间。