最稳方案是用position: absolute使两张图片完全重叠，配合opacity和transition实现交叉淡入淡出；需父容器设position: relative，两张图均加绝对定位与全尺寸，基础类定义opacity过渡，JS用classList原子操作切换active状态。
用 position: absolute + opacity 实现交叉淡入淡出
两张图片交叉过渡，本质是让前一张渐隐、后一张渐显，视觉上“擦肩而过”。最稳的方式是把它们叠在同一个容器里，用 position: absolute 定位重合，再靠 opacity 和 transition 控制透明度变化。
常见错误现象：图片错位、只有一张显示、切换时闪一下、动画卡顿
- 容器必须设
position: relative，否则absolute子元素会脱离文档流乱飘 - 两张
<img alt="HTML怎么让两张图片产生交叉过渡效果" >都要加position: absolute; top: 0; left: 0; width: 100%; height: 100%，确保完全重叠 -
transition: opacity 0.6s ease必须写在.image基础类里，不能只写在:hover或 JS 切换逻辑中 - 初始状态必须显式设
opacity: 1和opacity: 0，不能依赖默认值或留空
JS 控制切换时别漏掉 classList 的原子操作
用 JavaScript 切换图片，核心是交换两张图的可见性状态。如果直接改 style.opacity，容易和 CSS 动画冲突；用 classList 才可控、可复用。
使用场景：点击按钮、自动轮播、键盘方向键响应
把任意文章或文档内容转换成精美的全屏翻页 HTML 演示文件（幻灯片风格）。当用户发来一篇文章、文档链接、Markdown 内容、或粘贴的文本，并且希望生成演示用的 HTML 时触发。支持任意内容来源：iWiki 链接、KM 链接、本地文件路径、直接粘贴的文本。生成的 HTML 文件保存到本地工作区，并通过企微直接发送给用户。触发词示例：帮我把这篇文章做成PPT、转成演示文档、生成HTML幻灯片、做个演示、转成可以演示的格式、article to deck、make a slide。
立即学习“前端免费学习笔记（深入）”；
- 给两张图分别加 class：
class="image active"和class="image"（第二张无 active） - CSS 中定义：
.image { opacity: 0; transition: opacity 0.6s ease; }和.image.active { opacity: 1; } - 切换函数里先移除所有
active，再给目标图加 —— 否则可能两张同时为 1 或全为 0 - 避免在循环中频繁读写
offsetHeight或触发重排，否则动画掉帧
filter: blend-mode 不适合做“交叉过渡”
有人尝试用 mix-blend-mode: multiply 或 screen 让两张图叠加出混合效果，但这不是过渡，而是实时像素合成。它不会产生“一张退、一张进”的时序感，且在非重叠区域会出现意外色块或发灰。
性能影响明显：blend-mode 触发 GPU 合成，低端设备易卡顿；兼容性上 IE 完全不支持，旧版 Safari 表现不稳定。
- 如果你看到“交叉”效果其实是边缘融合/发光，那大概率是用了
box-shadow或filter: blur()，和过渡无关 - 真正需要交叉过渡，就别绕弯——
opacity是最轻量、最可靠、兼容到 IE10 的方案 - 若想加点动感，可在
opacity过渡基础上，给进入图加transform: scale(1.02)，退出图加scale(0.98)，但幅度务必小，否则失真
移动端 touch 事件下容易忽略的细节
在手机或平板上，用户可能滑动切换，这时仅监听 click 不够。但直接上 touchstart/touchend 容易误触，尤其图片区域小的时候。
- 建议用
pointerdown+pointerup，兼容鼠标、触摸、笔输入，且自带防误触延迟 - 切换前加个
if (isTransitioning) return标志位，防止快速连点导致状态错乱 - 不要在
transitionend里直接切下一张——该事件可能因动画被跳过而不触发，要用setTimeout保底 - 图片宽高未固定时（比如用
max-width: 100%），容器高度会抖动，务必给父容器设明确height或用 aspect-ratio
z-index、过渡属性漏写半截，都可能让效果断在 0.3 秒中间。 
