如何实现叠放图片左右滑动切换效果？仅用HTML+CSS是否可行？

可行性结论 #

这个需求纯HTML+CSS就可以实现基础可用的效果，如果需要更好的全浏览器兼容性、更流畅的无级拖拽体验或者自定义扩展功能，搭配少量JS即可，两种方案我都给你可以直接用的实现：

方案一：纯HTML+CSS实现（新手友好，无额外脚本） #

利用原生input type="range"的拖拽能力，配合CSS裁剪属性控制上层图片的显示范围，不需要写任何JS代码。

示例代码 #

HTML结构

<div class="compare-wrapper">
  <!-- 下层放处理后的效果图 -->
  <img src="after.jpg" alt="处理后效果" class="base-img">
  <!-- 上层放处理前的效果图，动态控制显示宽度 -->
  <img src="before.jpg" alt="处理前效果" class="cover-img">
  <!-- 原生滑块控件，设置透明度为0只用来捕获拖拽事件 -->
  <input type="range" min="0" max="100" value="50" class="drag-slider">
  <!-- 自定义可视化拖拽控制点 -->
  <div class="control-handle"></div>
</div>

CSS样式

.compare-wrapper {
  position: relative;
  width: 600px;
  height: 400px;
  overflow: hidden;
  --position: 50%;
}
.compare-wrapper img {
  position: absolute;
  top: 0;
  left: 0;
  width: 100%;
  height: 100%;
  object-fit: cover;
}
/* 上层图片默认只显示左半部分 */
.cover-img {
  clip-path: inset(0 calc(100% - var(--position)) 0 0);
}
.drag-slider {
  position: absolute;
  inset: 0;
  margin: 0;
  opacity: 0;
  cursor: ew-resize;
  z-index: 10;
}
.control-handle {
  position: absolute;
  top: 50%;
  left: var(--position);
  transform: translate(-50%, -50%);
  width: 32px;
  height: 32px;
  border-radius: 50%;
  background: #fff;
  box-shadow: 0 0 6px rgba(0,0,0,0.3);
  pointer-events: none;
  z-index: 9;
}
/* 同步滑块拖拽的位置到CSS变量（支持:has选择器的现代浏览器生效） */
@supports selector(:has(.drag-slider)) {
  .compare-wrapper:has(.drag-slider[value="0"]) { --position: 0%; }
  .compare-wrapper:has(.drag-slider[value="25"]) { --position: 25%; }
  .compare-wrapper:has(.drag-slider[value="50"]) { --position: 50%; }
  .compare-wrapper:has(.drag-slider[value="75"]) { --position: 75%; }
  .compare-wrapper:has(.drag-slider[value="100"]) { --position: 100%; }
}

优缺点 #

• 优点：零JS代码，实现成本极低，原生拖拽体验流畅
• 缺点：依赖CSS:has选择器，低版本浏览器（比如Safari 15.4以下、Chrome 105以下）不兼容，拖拽是按百分比档位变化的，不是完全无级

方案二：HTML+CSS+JS实现（兼容性好，交互灵活） #

只需要加10行以内的JS代码，就能实现全浏览器兼容的无级拖拽效果，还可以自行扩展更多交互。

新增JS代码（在方案一的HTML和CSS基础上添加即可） #

const slider = document.querySelector('.drag-slider');
const wrapper = document.querySelector('.compare-wrapper');

slider.addEventListener('input', () => {
  const pos = `${slider.value}%`;
  wrapper.style.setProperty('--position', pos);
});

优缺点 #

• 优点：兼容所有主流浏览器，拖拽完全无级顺滑，可以自由扩展比如双击复位、边界限制、实时参数回调等功能
• 缺点：需要写极少量JS，复杂度极低

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