产品页缩略图切换主图教程详解

✅ 正确做法：精准定位目标元素并统一绑定事件

核心在于两点：

1. 准确选取缩略图 元素本身（而非包裹它的
   ）；
2. 使用现代、可扩展的事件绑定方式（如 forEach + addEventListener），避免手动为每个索引写重复逻辑。

以下是推荐的修复方案：

<!-- HTML 结构（保持不变，仅强调关键结构） -->
<div class="single-pro-image">
  <img src="/f1.jpeg" width="100%" id="MainImg" alt="主展示图" />

  <div class="small-img-group">
    <div class="small-img-col"><img src="/f1.jpeg" width="100%" alt="缩略图1" /></div>
    <div class="small-img-col"><img src="/f2.jpeg" width="100%" alt="缩略图2" /></div>
    <div class="small-img-col"><img src="/f3.jpeg" width="100%" alt="缩略图3" /></div>
    <div class="small-img-col"><img src="/f6.jpeg" width="100%" alt="缩略图4" /></div>
  </div>
</div>

// ✅ 推荐 JS 实现（放在 </body> 底部或 DOMContentLoaded 中）
document.addEventListener('DOMContentLoaded', () => {
  const mainImg = document.getElementById('MainImg');
  // 直接选取所有 small-img-col 内的 img 元素（精准！）
  const thumbnailImgs = document.querySelectorAll('.small-img-col img');

  thumbnailImgs.forEach(thumb => {
    thumb.addEventListener('click', function() {
      mainImg.src = this.src;           // this 指向当前被点击的缩略图 img
      mainImg.alt = this.alt || '主展示图'; // 同步更新 alt 属性，提升可访问性
    });
  });
});

⚠️ 常见错误与注意事项

• ❌ 错误选择器：getElementsByClassName("small-img-col") 返回的是
  集合，其 .src 属性不存在。必须进一步获取子 （如 div.querySelector('img')）或直接用 querySelectorAll('.small-img-col img')。
• ⚠️ 缺少 DOM 加载保护：若脚本置于 中，getElementById 可能返回 null。务必包裹在 DOMContentLoaded 或将 script 放在 前。
• ?️ 图片路径一致性：确保缩略图 与主图期望路径完全一致（含相对路径前缀 /），否则会触发 404 导致空白。
• ? 扩展建议：如需高亮当前选中缩略图，可在 click 回调中先清除 .active 类，再为 this.parentElement 添加：

  document.querySelectorAll('.small-img-col').forEach(el => el.classList.remove('active'));
  this.parentElement.classList.add('active');

  并配合 CSS .small-img-col.active { border: 2px solid #007bff; } 实现视觉反馈。

该方案简洁、语义清晰、兼容性强（支持 IE9+），且易于维护与扩展。掌握此模式后，你不仅能修复当前问题，更能举一反三应用于轮播图、多图预览等场景。

文中关于的知识介绍，希望对你的学习有所帮助！若是受益匪浅，那就动动鼠标收藏这篇《产品页缩略图切换主图教程详解》文章吧，也可关注golang学习网公众号了解相关技术文章。