如何借助CSS定位模拟幻灯片层叠切换_操控z-index与opacity动画

z-index 无法直接做动画，因其为离散整数、不可插值；需配合 opacity 显隐与 z-index 阶跃切换实现层叠动画效果，同时注意预加载、容器定位及图片尺寸适配等关键细节。

直接用 z-index 做动画没效果，浏览器不支持插值；真正能“看起来像层叠动画”的方案，是靠 opacity 控制显隐 + z-index 阶跃式切换顺序，二者配合使用。

为什么给 z-index 加 transition 完全无效

z-index 是离散整数，不是连续可插值的属性（不像 opacity 或 transform）。写 transition: z-index 0.3s 后，你只会看到层级瞬间跳变，没有任何中间帧。

• 浏览器渲染层叠顺序时只看最终 z-index 值，不计算“0.5”这种中间态
• 即使你同时写了 transition: opacity 0.3s, z-index 0.3s，z-index 部分仍被忽略
• 真正需要动画感的地方，得交给 opacity、transform 或 filter 等可过渡属性

用 opacity + z-index 实现淡入淡出切换的关键写法

必须让当前项“高 z-index + opacity: 1”，其余项“低 z-index + opacity: 0”，且所有切换都走内联样式控制，避免 CSS 类延迟。

• 父容器必须设 position: relative，否则 absolute 子元素会相对 body 定位，图片飞到页面左上角
• 每张图统一设 position: absolute; top: 0; left: 0; width: 100%; height: 100%
• 切换逻辑只改两件事：style.opacity 和 style.zIndex，别碰 display 或 visibility
• 示例 JS：img.style.opacity = i === index ? '1' : '0'; img.style.zIndex = i === index ? '2' : '1';

容易被忽略的三个坑

多数人卡在细节上，不是逻辑错，而是漏了这些硬性前提。

立即学习“前端免费学习笔记（深入）”；

• 忘了预加载下一张图：opacity 切到 1 的瞬间若图片还没加载完，会闪白或留空——用 const nextImg = new Image(); nextImg.src = src; 提前触发
• 父容器高度没设明确值（如 height: 100vh），导致 height: 100% 失效，图片只显示原尺寸
• 没加 object-fit: cover，图片比例和容器不一致时，边缘留白或拉伸变形，看着像“没叠严实”

最麻烦的从来不是怎么写动画，而是确保所有图片在切换前已就位、尺寸对齐、定位基准正确——这些不搞定，opacity 再顺滑也盖不住白边和错位。