图像滑块(循环循环)鼠标悬停图像-缩略图，在JavaScript中鼠标弹出时停止

<div class="slider-container">
  <img src="主图像路径" class="main-image">
  <div class="thumbnail-container">
    <img src="缩略图1路径" class="thumbnail">
    <img src="缩略图2路径" class="thumbnail">
    <img src="缩略图3路径" class="thumbnail">
    <!-- 更多缩略图 -->
  </div>
</div>

.slider-container {
  position: relative;
}

.main-image {
  width: 100%;
  height: auto;
}

.thumbnail-container {
  position: absolute;
  bottom: 10px;
  left: 50%;
  transform: translateX(-50%);
}

.thumbnail {
  width: 50px;
  height: 50px;
  margin: 0 5px;
  cursor: pointer;
}

// 获取主图像和缩略图元素
const mainImage = document.querySelector('.main-image');
const thumbnails = document.querySelectorAll('.thumbnail');

// 定义当前选中的图片索引
let currentIndex = 0;

// 定义滑块循环播放的函数
function startSlider() {
  setInterval(() => {
    // 切换到下一张图片
    currentIndex = (currentIndex + 1) % thumbnails.length;
    mainImage.src = thumbnails[currentIndex].src;
  }, 2000);
}

// 鼠标悬停时停止滑块循环播放
mainImage.addEventListener('mouseover', () => {
  clearInterval(sliderInterval);
});

// 鼠标离开时恢复滑块循环播放
mainImage.addEventListener('mouseout', () => {
  startSlider();
});

// 点击缩略图切换到对应的图片
thumbnails.forEach((thumbnail, index) => {
  thumbnail.addEventListener('click', () => {
    currentIndex = index;
    mainImage.src = thumbnail.src;
  });
});

// 启动滑块循环播放
startSlider();