怎样使幻灯片在鼠标悬停时停止播放

要实现幻灯片在鼠标悬停时停止播放，可以使用JavaScript来控制幻灯片的播放和暂停。下面是一个使用HTML和JavaScript的示例代码，演示了如何实现该功能：

HTML代码：

<div class="slideshow">
  <img src="slide1.jpg" alt="Slide 1">
  <img src="slide2.jpg" alt="Slide 2">
  <img src="slide3.jpg" alt="Slide 3">
</div>

JavaScript代码：

var slideshow = document.querySelector('.slideshow');
var slides = slideshow.getElementsByTagName('img');
var intervalId;

// 开始播放幻灯片
function startSlideshow() {
  var currentSlide = 0;
  slides[currentSlide].style.display = 'block';
  
  intervalId = setInterval(function() {
    slides[currentSlide].style.display = 'none';
  
    currentSlide++;
    if (currentSlide >= slides.length) {
      currentSlide = 0;
    }
  
    slides[currentSlide].style.display = 'block';
  }, 2000);
}

// 停止播放幻灯片
function stopSlideshow() {
  clearInterval(intervalId);
}

// 鼠标悬停时停止播放
slideshow.addEventListener('mouseover', stopSlideshow);
slideshow.addEventListener('mouseout', startSlideshow);

// 开始自动播放幻灯片
startSlideshow();

在上面的代码中，我们首先获取到幻灯片的父容器元素和所有的幻灯片图片元素。然后定义了两个函数，startSlideshow()用于开始自动播放幻灯片，stopSlideshow()用于停止幻灯片的播放。

接着，我们添加了两个事件监听器，分别在鼠标悬停和鼠标离开时调用stopSlideshow()和startSlideshow()函数。最后，调用startSlideshow()函数开始自动播放幻灯片。

这样，当鼠标悬停在幻灯片上时，幻灯片的播放会被暂停，鼠标离开后会继续播放。