如何在HTML中设置图片切换过渡效果-html教程-PHP中文网

直接换 src 没有过渡效果是因为浏览器会清空当前图像并触发重新加载，产生空白期，而 opacity 过渡无法覆盖此间隙；应使用双 img 元素预加载+透明度切换实现淡入淡出。

如何在html中设置图片切换过渡效果

直接换 `src` 为什么没有过渡效果

因为浏览器在 img.src 被修改的瞬间会清空当前图像、触发重新加载，中间存在空白期或闪动。此时仅靠 opacity 过渡无法覆盖加载间隙——CSS 过渡只作用于已渲染元素的属性变化，而 src 切换会中断渲染流程。

常见错误是给 img 加 transition: opacity 0.5s 后直接改 src，结果还是“啪”一下跳变。

用两个 `img` 元素实现淡入淡出

核心思路：预加载下一张图，让新旧图短暂共存，再通过透明度切换视觉焦点。不依赖第三方库，纯原生 JS + CSS 即可。

HTML 中保留两个 <img> 标签，例如 id="img-current" 和 id="img-next"
CSS 设置统一 position: absolute; top: 0; left: 0; width: 100%; height: 100%，使它们完全重叠
初始时 #img-current 为 opacity: 1，#img-next 为 opacity: 0 且 pointer-events: none
切换前先设置 #img-next.src = nextImageUrl，监听 onload 事件确保加载完成
加载完成后，移除 #img-current 的 show 类（或设 opacity: 0），同时给 #img-next 加 show 类（或设 opacity: 1）

`transition` 必须精确作用于 `opacity`

写成 transition: all 0.5s 容易出问题——比如 width 或 height 微小变动也会触发动画，造成抖动；某些浏览器还会因 transform 未启用硬件加速而卡顿。

推荐写法：

anything-to-html

将调研报告、方案对比、数据分析、需求梳理、会议纪要、设计说明、代码评审、学习笔记等任务产物输出为可在浏览器直接打开的单文件 HTML，替代 Markdown 作为最终交付物。Markdown 在信息密度、视觉清晰度和可分享性上已跟不上 AI 产物的丰富度，HTML 能同时承载排版、表格、SVG 等。

下载

.slider-img {
  opacity: 0;
  transition: opacity 0.5s ease-in-out;
  position: absolute;
  top: 0; left: 0;
  width: 100%; height: 100%;
}
.slider-img.show {
  opacity: 1;
}

注意：ease-in-out 比 linear 更自然；若图片尺寸不一致，务必加 object-fit: cover 防止拉伸变形。