jquery 幻灯片 每张图停留时间不同 并且鼠标悬停 完整代码

以下是一个基于jQuery的幻灯片代码，其中每个图像停留的时间不同，并且在鼠标悬停时停止幻灯片。

HTML代码：

<div class="slider">
  <img src="image1.jpg" alt="Image 1" data-timeout="4000">
  <img src="image2.jpg" alt="Image 2" data-timeout="6000">
  <img src="image3.jpg" alt="Image 3" data-timeout="8000">
</div>

CSS代码：

.slider {
  position: relative;
  height: 400px;
  overflow: hidden;
}

.slider img {
  position: absolute;
  top: 0;
  left: 0;
  width: 100%;
  height: 100%;
  opacity: 0;
  transition: opacity 1s ease-in-out;
}

.slider img.active {
  opacity: 1;
}

.slider:hover img {
  opacity: 1 !important;
}

jQuery代码：

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

  function showSlide(slideIndex) {
    slides.removeClass('active');
    slides.eq(slideIndex).addClass('active');
    currentSlide = slideIndex;
  }

  function nextSlide() {
    var nextSlide = currentSlide + 1;
    if (nextSlide >= slides.length) {
      nextSlide = 0;
    }
    showSlide(nextSlide);
    setTimeout(nextSlide, slides.eq(currentSlide).data('timeout'));
  }

  showSlide(0);
  setTimeout(nextSlide, slides.eq(currentSlide).data('timeout'));
});

在这个代码中，我们使用了一个包含三张图片的幻灯片，并且每张图像的停留时间都不同。我们使用了一个`data-timeout`属性来定义每个图像停留的时间（以毫秒为单位）。在JavaScript中，我们使用`setTimeout()`函数来设置每个图像之间的暂停时间。我们还添加了一个函数来检查鼠标是否悬停在幻灯片上，并在鼠标悬停时停止幻灯片。