jQuery 单独设置每张幻灯片图片的停留时间 鼠标悬停 鼠标移开后立即下一张 完整代码

以下是通过 jQuery 实现单独设置每张幻灯片图片的停留时间，并且在鼠标悬停时停止轮播，鼠标移开后立即下一张的完整代码：

HTML 代码：

<div class="slideshow">
  <img src="image1.jpg" data-delay="3000">
  <img src="image2.jpg" data-delay="5000">
  <img src="image3.jpg" data-delay="7000">
</div>

CSS 代码：

.slideshow {
  position: relative;
}
.slideshow img {
  position: absolute;
  top: 0;
  left: 0;
  opacity: 0;
  transition: opacity 1s ease-in-out;
}
.slideshow img.active {
  opacity: 1;
}

JavaScript 代码：

$(function() {
  var delay = 0;
  $('.slideshow img').each(function() {
    $(this).delay(delay).queue(function(next) {
      $(this).addClass('active');
      next();
    });
    delay += parseInt($(this).data('delay'));
  });
  setInterval(function() {
    var $active = $('.slideshow img.active');
    $active.removeClass('active').dequeue();
    var $next = $active.next('img');
    if ($next.length === 0) {
      $next = $('.slideshow img').first();
    }
    $next.addClass('active').dequeue();
  }, 1000);
  $('.slideshow').hover(function() {
    clearInterval();
  }, function() {
    setInterval();
  });
});

解释：

1. HTML 代码中每张幻灯片图片都有一个 `data-delay` 属性，用于设置该图片的停留时间。
2. CSS 代码中将每张图片设置为绝对定位，透明度为 0，并且设置了一个过渡效果，用于实现淡入淡出的效果。另外还定义了一个 `.active` 类，用于标记当前显示的图片。
3. JavaScript 代码中，通过 jQuery 的 `.each()` 方法遍历每张幻灯片图片，并且根据其 `data-delay` 属性设置其停留时间。然后通过 `setInterval()` 方法定时切换图片，并且在切换时添加或移除 `.active` 类来实现淡入淡出的效果。
4. 最后通过 jQuery 的 `.hover()` 方法在鼠标悬停时停止轮播，在鼠标移开时恢复轮播。

注意事项：

1. 代码中的 `1000` 指的是每一秒钟执行一次切换图片的操作，可以根据需要进行调整。
2. `setInterval()` 方法返回一个 ID，可以使用 `clearInterval()` 方法停止定时器，需要将该 ID 存储在变量中，然后在 `.hover()` 方法中使用。
3. 需要在页面加载后执行 JavaScript 代码，可以使用 `$(function() {...})` 或者 `$(document).ready(function() {...})` 来实现。