jQuery 幻灯片 单独控制每张图时间 鼠标悬停

以下是一个基本的 jQuery 幻灯片代码示例，它允许您单独控制每张图的时间，并在鼠标悬停时暂停幻灯片循环：

HTML 代码：

<div id="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;
  height: 400px;
}

#slideshow img {
  position: absolute;
  top: 0;
  left: 0;
  width: 100%;
  height: 100%;
  display: none;
}

#slideshow img.active {
  display: block;
}

jQuery 代码：

$(document).ready(function() {
  // 设置变量
  var slideCount = $('#slideshow img').length;
  var currentSlide = 1;
  var slideshow = setInterval(nextSlide, 5000);
  
  // 显示第一张幻灯片
  $('#slideshow img:first').addClass('active');
  
  // 下一张幻灯片函数
  function nextSlide() {
    currentSlide = currentSlide + 1;
    if (currentSlide > slideCount) { currentSlide = 1; }
    $('#slideshow img.active').removeClass('active').fadeOut(1000);
    $('#slideshow img:nth-child(' + currentSlide + ')').addClass('active').fadeIn(1000);
  }
  
  // 鼠标悬停时暂停幻灯片循环
  $('#slideshow').hover(
    function() { clearInterval(slideshow); },
    function() { slideshow = setInterval(nextSlide, 5000); }
  );
  
  // 单独控制每张图的时间
  setTimeout(function() { nextSlide(); }, 2000);
  setTimeout(function() { nextSlide(); }, 7000);
  setTimeout(function() { nextSlide(); }, 12000);
});

在这个示例中，我们使用 setInterval() 函数来自动切换幻灯片。我们还使用 setTimeout() 函数来单独控制每张图的时间。在鼠标悬停时，我们使用 clearInterval() 函数暂停幻灯片循环，并使用 setInterval() 函数在鼠标离开时恢复幻灯片循环。我们还使用 addClass()、removeClass() 和 fadeIn()/fadeOut() 函数来控制幻灯片的显示和隐藏。