js带缩略图的图片切换

基础概念：在JavaScript中实现带缩略图的图片切换，通常涉及到DOM操作、事件监听以及CSS样式的控制。缩略图通常用于提供一个小的预览图，用户可以通过点击缩略图来切换显示的大图。

优势：

提供直观的图片预览，提升用户体验。
减少加载大图时的等待时间，因为用户可以先看到缩略图。
方便用户快速定位到感兴趣的图片。

类型：

手动切换：用户通过点击缩略图来切换图片。
自动切换：在一定时间间隔后自动切换到下一张图片。

应用场景：

图片画廊
轮播图
产品展示

示例代码：以下是一个简单的带缩略图的图片切换示例：

<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
<title>Image Slider with Thumbnails</title>
<style>
  .thumbnail {
    cursor: pointer;
    margin: 5px;
  }
  .thumbnail:hover {
    opacity: 0.7;
  }
  #largeImage {
    width: 300px;
    height: 200px;
  }
</style>
</head>
<body>

<div id="thumbnails">
  <img src="image1-thumb.jpg" class="thumbnail" data-large="image1.jpg">
  <img src="image2-thumb.jpg" class="thumbnail" data-large="image2.jpg">
  <img src="image3-thumb.jpg" class="thumbnail" data-large="image3.jpg">
</div>

<img id="largeImage" src="image1.jpg">

<script>
  document.querySelectorAll('.thumbnail').forEach(thumbnail => {
    thumbnail.addEventListener('click', function() {
      const largeImage = document.getElementById('largeImage');
      largeImage.src = this.getAttribute('data-large');
    });
  });
</script>

</body>
</html>

常见问题及解决方法：