jQuery 设置不同图片切换时间不同 轮播图代码

以下是一个简单的轮播图代码，其中使用了jQuery的animate()函数来实现图片的切换效果。可以通过修改interval变量的值来调整不同图片之间的切换时间，从而实现不同图片切换时间不同的效果。

HTML代码：

<div class="slideshow">
  <img src="image1.jpg" alt="Image 1">
  <img src="image2.jpg" alt="Image 2">
  <img src="image3.jpg" alt="Image 3">
</div>

CSS代码：

.slideshow {
  position: relative;
  width: 500px;
  height: 300px;
}
.slideshow img {
  position: absolute;
  top: 0;
  left: 0;
  opacity: 0;
  z-index: 1;
}
.slideshow img.active {
  opacity: 1;
  z-index: 2;
}

jQuery代码：

$(document).ready(function() {
  // 设置轮播图切换时间
  var interval = 5000; // 5秒钟
  // 初始化轮播图
  var slides = $('.slideshow img');
  var index = 0;
  slides.eq(index).addClass('active');
  // 定时切换轮播图
  setInterval(function() {
    // 切换到下一个图片
    slides.eq(index).removeClass('active');
    index = (index + 1) % slides.length;
    slides.eq(index).addClass('active');
    // 根据图片的序号设置不同的切换时间
    if (index == 0) {
      // 第一张图片，切换时间为interval
      setTimeout(function() {
        slides.eq(index).removeClass('active');
        index = (index + 1) % slides.length;
        slides.eq(index).addClass('active');
      }, interval);
    } else if (index == 1) {
      // 第二张图片，切换时间为interval * 2
      setTimeout(function() {
        slides.eq(index).removeClass('active');
        index = (index + 1) % slides.length;
        slides.eq(index).addClass('active');
      }, interval * 2);
    } else {
      // 其他图片，切换时间为interval / 2
      setTimeout(function() {
        slides.eq(index).removeClass('active');
        index = (index + 1) % slides.length;
        slides.eq(index).addClass('active');
      }, interval / 2);
    }
  }, interval);
});