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

以下是一个简单的可重复使用的 jQuery 幻灯片代码，其中每张图都可以设置不同的时间。

HTML 代码：

<div class="slideshow">
  <img src="img/slide1.jpg" data-time="5000" />
  <img src="img/slide2.jpg" data-time="7000" />
  <img src="img/slide3.jpg" data-time="9000" />
</div>

jQuery 代码：

$(document).ready(function() {
  var slides = $('.slideshow img');
  var currentSlide = 0;

  function nextSlide() {
    slides.eq(currentSlide).fadeOut();
    currentSlide = (currentSlide + 1) % slides.length;
    slides.eq(currentSlide).fadeIn();
    setTimeout(nextSlide, slides.eq(currentSlide).data('time'));
  }

  slides.hide().eq(0).show();
  setTimeout(nextSlide, slides.eq(0).data('time'));
});

CSS 代码：

.slideshow img {
  position: absolute;
  top: 0;
  left: 0;
  z-index: 1;
}

说明：

1. 首先，我们获取了所有幻灯片图片的 jQuery 对象，以及当前显示的幻灯片索引。

2. 然后，我们定义了一个 nextSlide() 函数，它会将当前幻灯片淡出，然后将下一张幻灯片淡入，并根据它的 data-time 属性设置下一次切换的时间。这里使用了 setTimeout() 函数来实现定时。

3. 接着，我们隐藏了所有幻灯片图片，并显示了第一张幻灯片。然后，根据第一张幻灯片的 data-time 属性设置第一次切换的时间。

4. 最后，我们还添加了一些 CSS 样式，使幻灯片图片定位到页面左上角并覆盖在一起。