jQuery 单独设置每张幻灯片图片的停留时间 鼠标悬停

可以使用jQuery的定时器和鼠标悬停事件来实现单独设置每张幻灯片图片的停留时间。

HTML结构：

<div class="slider">
  <div class="slide active">
    <img src="slide1.jpg" data-time="5000">
  </div>
  <div class="slide">
    <img src="slide2.jpg" data-time="4000">
  </div>
  <div class="slide">
    <img src="slide3.jpg" data-time="6000">
  </div>
</div>

CSS样式：

.slider {
  position: relative;
  overflow: hidden;
}
.slide {
  position: absolute;
  top: 0;
  left: 0;
  opacity: 0;
  transition: opacity 0.5s ease-in-out;
}
.slide.active {
  opacity: 1;
}

jQuery代码：

$(function() {
  var slides = $('.slide');
  var currentSlide = 0;
  
  // 设置第一张幻灯片为活动状态
  slides.eq(currentSlide).addClass('active');
  
  // 自动播放幻灯片
  var timer = setInterval(function() {
    nextSlide();
  }, slides.eq(currentSlide).find('img').data('time'));
  
  // 鼠标悬停暂停自动播放
  $('.slider').on('mouseenter', function() {
    clearInterval(timer);
  }).on('mouseleave', function() {
    timer = setInterval(function() {
      nextSlide();
    }, slides.eq(currentSlide).find('img').data('time'));
  });
  
  // 切换到下一张幻灯片
  function nextSlide() {
    slides.eq(currentSlide).removeClass('active');
    currentSlide = (currentSlide + 1) % slides.length;
    slides.eq(currentSlide).addClass('active');
    clearInterval(timer);
    timer = setInterval(function() {
      nextSlide();
    }, slides.eq(currentSlide).find('img').data('time'));
  }
});

解释：

1. 在HTML中，每张幻灯片的图片都包含一个data-time属性，用于设置该图片停留的时间。
2. 在jQuery中，首先获取所有幻灯片的jQuery对象和当前活动幻灯片的索引currentSlide。
3. 设置第一张幻灯片为活动状态。
4. 使用setInterval和data-time属性的值来自动播放幻灯片。当幻灯片播放完毕后，调用nextSlide()函数切换到下一张幻灯片。
5. 使用mouseenter和mouseleave事件来实现鼠标悬停暂停自动播放。
6. nextSlide()函数用于切换到下一张幻灯片。首先移除当前幻灯片的活动状态，然后计算出下一张幻灯片的索引，并设置其为活动状态。最后，使用clearInterval清除之前的定时器，并重新设置一个新的定时器以播放下一张幻灯片。