Jquery幻灯片 单独控制时间 鼠标悬停

以下是一个简单的jQuery幻灯片代码，可以单独控制时间和鼠标悬停：

HTML：

<div id="slideshow">
  <ul>
    <li><img src="img1.jpg" alt="Image 1"></li>
    <li><img src="img2.jpg" alt="Image 2"></li>
    <li><img src="img3.jpg" alt="Image 3"></li>
  </ul>
</div>

CSS：

#slideshow {
  position: relative;
  height: 300px;
  overflow: hidden;
}
#slideshow ul {
  list-style: none;
  position: absolute;
  top: 0;
  left: 0;
  width: 100%;
  height: 100%;
}
#slideshow ul li {
  position: absolute;
  top: 0;
  left: 0;
  width: 100%;
  height: 100%;
  opacity: 0;
  transition: opacity 1s ease-in-out;
}
#slideshow ul li.active {
  opacity: 1;
}

jQuery：

$(document).ready(function() {
  
  // 设置幻灯片的总时间
  var total_time = 5000;
  
  // 初始化幻灯片
  var slideshow = $("#slideshow");
  var slides = slideshow.find("ul li");
  var current_slide = 0;
  slides.eq(current_slide).addClass("active");
  
  // 启动幻灯片定时器
  var timer = setInterval(function() {
    // 切换到下一张幻灯片
    slides.eq(current_slide).removeClass("active");
    current_slide = (current_slide + 1) % slides.length;
    slides.eq(current_slide).addClass("active");
  }, total_time);
  
  // 当鼠标悬停在幻灯片上时暂停定时器
  slideshow.hover(function() {
    clearInterval(timer);
  }, function() {
    timer = setInterval(function() {
      slides.eq(current_slide).removeClass("active");
      current_slide = (current_slide + 1) % slides.length;
      slides.eq(current_slide).addClass("active");
    }, total_time);
  });
  
  // 单独控制每张幻灯片的时间
  var slide_times = [3000, 4000, 5000];
  var slide_timers = [];
  for (var i = 0; i < slides.length; i++) {
    (function(index) {
      slide_timers[index] = setInterval(function() {
        if (index == current_slide) {
          slides.eq(current_slide).removeClass("active");
          current_slide = (current_slide + 1) % slides.length;
          slides.eq(current_slide).addClass("active");
        }
      }, slide_times[index]);
    })(i);
  }
  
});

这个代码使用了两个定时器，一个定时器控制整个幻灯片的时间，另一个定时器控制每张幻灯片的时间。同时，当鼠标悬停在幻灯片上时，定时器会被暂停。