如何在HTML中实现点击产品缩略图切换主图、其余保留缩略图

这个电商场景下的常见图切换逻辑不需要依赖任何第三方库，基于你现有的HTML结构，用原生JavaScript几十行代码就能落地，完全匹配你的需求。 #

核心实现逻辑 #

整个交互的触发链路非常简单：

• 捕获.product-gallery容器内所有缩略图的点击事件
• 点击触发时，将当前被选中缩略图的图片源，同步替换到.product-main-img容器内的主图src属性
• 因为没有替换主图的DOM元素本身，原本给主图写好的宽高、圆角、阴影等样式会完全沿用，和默认展示的product-thumb-13.jpg视觉效果完全一致，不需要额外调整样式。

可直接复用的代码 #

核心JavaScript逻辑 #

把这段代码放到页面的脚本区（确保DOM加载完成后执行即可）：

// 选取对应DOM元素
const mainImage = document.querySelector('.product-main-img img');
const thumbnailList = document.querySelectorAll('.product-gallery img');

// 为每张缩略图绑定点击事件
thumbnailList.forEach(thumbnail => {
  thumbnail.addEventListener('click', () => {
    // 同步主图的图片源和alt文本
    mainImage.src = thumbnail.src;
    mainImage.alt = thumbnail.alt;

    // 可选优化：标记当前选中的缩略图，给用户明确的反馈
    thumbnailList.forEach(item => item.classList.remove('active'));
    thumbnail.classList.add('active');
  });
});

配套可选样式 #

如果需要补充交互体验，可以加上这段CSS，让缩略图的可点击状态、选中状态更明显：

/* 缩略图默认可点击态 */
.product-gallery img {
  cursor: pointer;
  border: 2px solid transparent;
  transition: border-color 0.2s ease;
}
/* 选中态高亮 */
.product-gallery img.active {
  border-color: #222;
}

常见扩展适配 #

加载高清主图 #

如果不想让主图直接使用和缩略图同分辨率的压缩版本，只需要给每个缩略图加个自定义属性存高清图的路径，点击时读取这个属性即可，不需要修改核心逻辑：

<!-- 给缩略图补充高清图地址属性 -->
<img src="img/product-thumb-14.jpg" data-full-src="img/product-full-14.jpg" alt="">

对应把JS里取值的那行改成：

// 优先加载高清图，没有配置的话就用缩略图本身的地址当主图
mainImage.src = thumbnail.dataset.fullSrc || thumbnail.src;

适配多产品展示场景 #

如果页面同时存在多个独立的产品展示模块，可以把逻辑改成在每个.product-images容器范围内绑定事件，避免全局选择器误选其他模块的元素：

document.querySelectorAll('.product-images').forEach(container => {
  const mainImg = container.querySelector('.product-main-img img');
  const thumbs = container.querySelectorAll('.product-gallery img');
  
  thumbs.forEach(thumb => {
    thumb.addEventListener('click', () => {
      // 取高清图地址替换主图
      mainImg.src = thumb.dataset.fullSrc || thumb.src;
      // 切换选中态
      thumbs.forEach(i => i.classList.remove('active'));
      thumb.classList.add('active');
    })
  })
})

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