如何实现图片点击切换的平滑淡入淡出效果（支持双向切换）-html教程-PHP中文网

如何实现图片点击切换的平滑淡入淡出效果（支持双向切换）

本文介绍一种基于 CSS 类控制与 JavaScript 逻辑分离的图片切换方案，通过 active 类管理显示状态，配合绝对定位与 CSS 过渡实现无缝双向切换，无需手动判断状态或使用冗余定时器。

本文介绍一种基于 css 类控制与 javascript 逻辑分离的图片切换方案，通过 `active` 类管理显示状态，配合绝对定位与 css 过渡实现无缝双向切换，无需手动判断状态或使用冗余定时器。

在摄影类网站中，常需展示同一场景“前期直出”与“后期精修”两张对比图，并通过一次点击切换、再次点击返回——即典型的双向 Toggle 效果。原代码试图用 toggle 事件或单次 click + setTimeout 移除旧图的方式模拟切换，但存在逻辑缺陷：onToggle 并非标准 HTML 事件（浏览器不支持），且基于 DOM 替换的 JS 方案难以可靠回退，易导致状态错乱或内存泄漏。

✅ 正确思路是：将状态交由 CSS 类（如 .active）驱动，JS 仅负责切换类名，所有动画、可见性、交互响应均由 CSS 控制。这样既保证可逆性，又提升性能与可维护性。

✅ 推荐实现方案

1. HTML 结构（双图并存，初始仅一张激活）

<div class="no-select imgBx col post-box" id="box_1">
  <!-- 第一张图默认激活（直出图） -->
  <img class="active fade-in" src="./assets/img/prima-dopo/ferrero-prima.jpg" alt="Before post-production" onclick="swap(this)"><!-- 第二张图为精修图，初始不激活 --><img class="fade-in" src="./assets/img/prima-dopo/ferrero-dopo.jpg" alt="After post-production" onclick="swap(this)">
</div>

? 关键点：

不再依赖 data-secondImg 属性动态创建元素；

两张 <img> 同时存在于 DOM 中，语义清晰、SEO 友好；

onclick 统一调用 swap(this)，逻辑对称。

2. CSS 样式（定位 + 状态驱动 + 动画）

.imgBx {
  position: relative; /* 为子元素绝对定位提供参照 */
  display: inline-block; /* 防止高度塌陷 */
}

.imgBx img {
  position: absolute;
  top: 0;
  left: 0;
  width: 100%;
  height: auto;
  pointer-events: none; /* 默认禁用鼠标交互，避免误触重叠图 */
  opacity: 0;
  transition: opacity 0.6s ease, transform 0.3s ease;
}

.imgBx img.active {
  pointer-events: auto; /* 激活后才可点击 */
  opacity: 1;
}

.fade-in {
  /* 可选增强：添加轻微缩放入场感 */
  transform: scale(0.98);
}
.imgBx img.active.fade-in {
  transform: scale(1);
}

⚠️ 注意事项：

position: absolute + top/left: 0 确保两张图完全重叠；

pointer-events: none/auto 是关键，避免非激活图拦截点击事件；

transition 应写在通用选择器（.imgBx img），而非仅 .active，否则退出动画无效。

3. 精简可靠的 JavaScript

function swap(target) {
  const parent = target.parentElement;
  // 移除所有 img 的 active 类
  parent.querySelectorAll('img').forEach(img => img.classList.remove('active'));
  // 为当前点击的 img 添加 active 类
  target.classList.add('active');
}

✅ 优势总结：

真正 Toggle：每次点击都切换到目标图，天然支持无限次来回切换；

零定时器：告别 setTimeout 和手动 DOM 删除，无竞态风险；

高可扩展性：后续增加第三张图（如 RAW 文件预览）只需新增 <img> 并绑定相同 onclick；

无障碍友好：双图均保留在 DOM 中，屏幕阅读器可读取全部 alt 文本。