淡入淡出轮播图应使用 opacity + transition 实现，所有轮播项需绝对定位重叠、统一初始 opacity: 0 并声明 transition: opacity 0.4s ease，通过切换 .active 类控制显示，配合 clearInterval 防定时器叠加及 index 取模防越界。
淡入淡出轮播图用 opacity + transition 实现最稳，别碰 display 或 visibility——它们没法过渡，切出来就是“啪”一下闪。
所有轮播项必须绝对定位重叠
否则 opacity 动画会错位、叠不严、透底。关键不是“换图”，是让多张图在同一位置轮流变透明。
-
position: absolute是最直接的选择，父容器加position: relative - 如果用
position: relative+top: 0; left: 0，务必确保所有项都套在同一层父容器里 - 每张图默认
opacity: 0，.active项设为opacity: 1，并配z-index: 1确保在最上层 - 忘记
z-index会导致新图没盖住旧图，尤其在快速切换时容易看到两张图同时半透明
transition 必须只写 opacity
写成 transition: all 0.4s 或 transition: opacity 0.4s, transform 0.4s 都可能引入意外动画，比如 margin、left 没清干净就动了。
- 正确写法：
transition: opacity 0.4s ease（或ease-in-out） - 不要给
display或visibility加 transition——CSS 不支持，写了也无效 - 过渡时间别太短（
0.2s），人眼跟不上；也别太长（0.8s），用户会觉得卡顿 - 如果用 JS 切类名，确保 classList 切换是原子操作，避免中间状态残留
setInterval 定时器必须防叠加
用户点“下一张”时，上一个定时器若还没执行完，就可能跳过一帧甚至跳两帧——这是最常见的逻辑错乱来源。
立即学习“前端免费学习笔记（深入）”；
- 每次切换前先
clearInterval(timer)，再重新setInterval - 鼠标悬停时调用
clearInterval，离开时重置并重启，别只暂停不清理 - 监听
document.visibilityState或visibilitychange事件，页面切到后台再切回来时自动恢复轮播，否则可能卡死 - 切换函数里别直接改
index++，要用index = (index + 1) % slides.length防越界
最容易被忽略的是：轮播项的 opacity 初始值必须统一设为 0，且所有项都要有 transition 声明——哪怕当前不是 active，否则第一张图出现时没有动画，后续才开始渐变，体验断层。
