JavaScript实现点击缩略图替换为原图（限制最大宽度）

算力阿峰

2026-7-25

实现点击缩略图切换为带宽度限制的原图（仿4chan/g/板块效果）

核心实现思路

用原生HTML/CSS/JS实现：给缩略图绑定点击事件，切换图片源为原图，同时通过CSS限制原图最大宽度，点击原图可切换回缩略图，完全匹配你要的交互逻辑。

1. HTML结构

给每个缩略图添加data-original属性存储原图地址，统一加thumb类名方便JS选择：

<img class="thumb" src="thumb-1.jpg" data-original="full-1.jpg" alt="示例图片1">
<img class="thumb" src="thumb-2.jpg" data-original="full-2.jpg" alt="示例图片2">

2. CSS样式

定义缩略图默认样式，同时给原图设置最大宽度，确保不超出可视区域且保持比例：

/* 缩略图默认样式（可按需调整） */
.thumb {
  width: 150px;
  height: auto;
  cursor: pointer; /* 提示可点击 */
}

/* 原图样式：限制最大宽度 */
.thumb.full-size {
  max-width: 90vw; /* 占屏幕宽度90%，避免溢出 */
  width: auto; /* 取消缩略图的固定宽度 */
}

3. JavaScript逻辑

给所有缩略图绑定点击事件，实现图片源和样式的双向切换：

// 获取所有缩略图元素
const thumbnails = document.querySelectorAll('.thumb');

thumbnails.forEach(thumb => {
  // 预先存储缩略图地址，用于切换回去
  thumb.dataset.thumbnail = thumb.src;

  thumb.addEventListener('click', () => {
    // 判断当前状态，切换图片和样式
    if (thumb.classList.contains('full-size')) {
      // 切回缩略图
      thumb.src = thumb.dataset.thumbnail;
      thumb.classList.remove('full-size');
    } else {
      // 切换为原图
      thumb.src = thumb.dataset.original;
      thumb.classList.add('full-size');
    }
  });
});