使用Vanilla JS实现点击缩略图切换主图功能的技术问询

你这个思路完全没问题——通过修改主图img的src属性来实现切换是最直接的方案，不过看你贴的代码没写完，而且还有几个容易踩的小坑，我帮你完善一下，顺便把关键细节说清楚：

完整实现代码 #

HTML结构

<!-- 主图片容器 -->
<div class="main-image-container">
  <img id="mainImg" src="path-to-your-first-image.jpg" alt="主展示图片">
</div>

<!-- 缩略图容器 -->
<div id="thumbnailContainer" class="thumbnail-container">
  <img class="thumbnail" src="path-to-your-first-image-thumb.jpg" data-full-src="path-to-your-first-image.jpg" alt="缩略图1">
  <img class="thumbnail" src="path-to-your-second-image-thumb.jpg" data-full-src="path-to-your-second-image.jpg" alt="缩略图2">
  <img class="thumbnail" src="path-to-your-third-image-thumb.jpg" data-full-src="path-to-your-third-image.jpg" alt="缩略图3">
</div>

CSS样式（简单美化）

.main-image-container {
  margin: 20px auto;
  width: 600px;
  height: 400px;
  overflow: hidden;
}
.main-image-container img {
  width: 100%;
  height: 100%;
  object-fit: cover;
}

.thumbnail-container {
  display: flex;
  gap: 10px;
  justify-content: center;
}
.thumbnail {
  width: 100px;
  height: 75px;
  object-fit: cover;
  cursor: pointer;
  border: 2px solid transparent;
  transition: border-color 0.2s;
}
.thumbnail.active {
  border-color: #2196F3;
}

原生JS逻辑

document.addEventListener('DOMContentLoaded', (event) => {
  const mainImg = document.getElementById("mainImg");
  const thumbnailContainer = document.getElementById("thumbnailContainer");
  // 获取所有缩略图元素，给默认第一个加选中状态
  const thumbnails = document.querySelectorAll('.thumbnail');
  thumbnails[0].classList.add('active');

  thumbnailContainer.addEventListener("click", (event) => {
    // 只处理点击缩略图img的情况，避免点到容器空白处触发
    if (event.target.matches('.thumbnail')) {
      // 移除所有缩略图的选中状态
      thumbnails.forEach(thumb => thumb.classList.remove('active'));
      // 给当前点击的缩略图加选中状态
      event.target.classList.add('active');
      // 切换主图的src（这里用data属性存原图路径，比直接用缩略图路径更灵活）
      mainImg.src = event.target.dataset.fullSrc;
      // 同步更新主图的alt属性
      mainImg.alt = event.target.alt.replace('缩略图', '');
    }
  });
});

关键细节说明 #

• 事件委托的优势：不给每个缩略图单独加点击事件，而是给父容器加监听，性能更好，而且后续动态添加缩略图也能自动生效。
• 避免误触发：用event.target.matches('.thumbnail')判断点击的是不是缩略图元素，防止点击容器空白处时执行无效逻辑。
• 选中状态反馈：给当前点击的缩略图加边框样式，让用户清楚知道哪张是当前选中的缩略图，提升体验。
• 灵活的路径处理：用data-full-src属性存储原图路径，而不是直接用缩略图的src，这样缩略图和主图可以用不同尺寸的图片（比如缩略图是压缩后的小图，主图是高清图），优化加载速度。

如果你的缩略图和主图路径是有规律的（比如缩略图路径里有-thumb，主图没有），也可以直接通过字符串替换来获取主图路径，比如：

mainImg.src = event.target.src.replace('-thumb', '');

内容的提问来源于stack exchange，提问作者ste