直接换 src 没有过渡效果是因为浏览器会清空当前图像并触发重新加载，产生空白期，而 opacity 过渡无法覆盖此间隙；应使用双 img 元素预加载+透明度切换实现淡入淡出。
直接换 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 防止拉伸变形。
图片加载失败时过渡会中断
如果 nextImageUrl 返回 404，img.onload 不会触发，img.onerror 也不会自动恢复旧图——用户会看到一张半透明黑块或空白。
稳妥做法：
- 为
#img-next绑定onerror，失败时调用回退逻辑（如重试、跳过、或显示占位图） - 加超时兜底：用
setTimeout限制最大等待时间（如 3s），超时则强制切换并报错 - 避免把所有图片路径硬编码在 JS 里，改用
data-src存在 DOM 上，便于服务端动态注入或 CDN 切换
真正容易被忽略的是加载状态管理——过渡效果是否平滑，80% 取决于你有没有处理好「加载中 → 加载完成 → 切换中 → 切换完成」这四个阶段的衔接。
