点击切换Galleria图库中图片的实现需求

我刚好做过类似的游戏截图版本对比图库，给你一套可以直接上手的实现方案，分三部分拆解，逻辑清晰还容易扩展：

• 每个对比项用独立容器包裹，内部包含「前版本」和「后版本」两张图片
• 默认状态下只显示「后版本」图片
• 点击容器时，切换「前版本」图片的显示状态（覆盖在「后版本」上），再次点击切回去，实现来回对比

HTML 结构 #

这里用一个.gallery容器包裹所有对比项，每个对比项是.gallery-item，里面放两张图片，分别加.version-before（前版本）和.version-after（后版本）类：

<div class="gallery">
  <!-- 对比项1 -->
  <div class="gallery-item">
    <img src="your-old-screenshot-1.png" alt="前版本截图1" class="version-before">
    <img src="your-new-screenshot-1.png" alt="后版本截图1" class="version-after">
  </div>
  <!-- 对比项2 -->
  <div class="gallery-item">
    <img src="your-old-screenshot-2.png" alt="前版本截图2" class="version-before">
    <img src="your-new-screenshot-2.png" alt="后版本截图2" class="version-after">
  </div>
  <!-- 可以继续添加更多对比项 -->
</div>

CSS 样式 #

用定位让两张图片重叠，默认隐藏前版本，点击后通过.active类显示：

.gallery {
  display: grid;
  grid-template-columns: repeat(auto-fill, minmax(300px, 1fr));
  gap: 20px;
  padding: 20px;
}

.gallery-item {
  position: relative;
  cursor: pointer;
  border-radius: 8px;
  overflow: hidden;
  box-shadow: 0 2px 8px rgba(0,0,0,0.1);
}

.gallery-item img {
  width: 100%;
  height: auto;
  display: block;
}

/* 默认隐藏前版本图片 */
.version-before {
  position: absolute;
  top: 0;
  left: 0;
  opacity: 0;
  transition: opacity 0.3s ease; /* 平滑过渡效果 */
}

/* 点击后显示前版本 */
.gallery-item.active .version-before {
  opacity: 1;
}

JavaScript 交互 #

给每个对比项添加点击事件，切换active类来控制显示状态：

// 获取所有对比项容器
const galleryItems = document.querySelectorAll('.gallery-item');

galleryItems.forEach(item => {
  item.addEventListener('click', () => {
    // 切换active类
    item.classList.toggle('active');
  });
});

• 调整布局：修改.gallery的grid-template-columns可以改变每行显示的图片数量，比如repeat(2, 1fr)就是每行2张
• 添加提示：可以给容器加hover提示，比如用:before伪元素显示“点击查看旧版本”
• 键盘支持：如果需要，还可以添加键盘事件（比如空格键）来切换当前选中的对比项
• 图片加载优化：对图片进行压缩，或者用loading="lazy"实现懒加载，提升页面性能

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