最稳妥的图片轮播实现需用 setinterval + queryselector，但必须清理旧定时器、检查 img.complete 状态、用模运算防索引越界，并通过 opacity/z-index/transition 实现淡入淡出，hover 暂停后还需精准续播。
直接用 setInterval + querySelector 控制图片切换最稳妥，但必须处理好定时器清理、图片加载状态和索引越界——否则轮播会卡在第一张或最后一张，或者出现多个定时器同时跑导致闪屏。
为什么不能直接改 img.src 就完事
网络慢时，img.src 赋值后图片还没加载完成，DOM 就已渲染空白；用户快速点击“下一张”又触发新赋值，旧请求没响应，新请求又发出去，最终看到白屏或错序。更隐蔽的问题是：没调用 clearInterval 就反复初始化定时器，多个 setInterval 并行执行，currentIndex 被疯狂递增，瞬间越界。
- 每次切换前检查
img.complete，为false就跳过本次更新 - 所有定时器启动前，先用
clearInterval清掉旧的（存一个全局变量如carouselTimer） - 避免用
getElementsByClassName，它返回的是实时类数组，后续length可能突变；改用document.querySelectorAll('.slide')得到静态 NodeList
setInterval 切换逻辑怎么写才不越界
常见错误是把 slideIndex += n 放在边界判断前，比如连续点三次“下一张”，slideIndex 从 0 → 1 → 2 → 3，但第 4 次再加就变成 4，而图片只有 4 张（索引 0–3），结果 slides[4] 是 undefined，显示失败后被强行重置为 0 或 3，造成首尾图来回跳。
- 正确做法：计算目标索引用
let target = (currentIndex + n + slides.length) % slides.length，确保始终在合法范围内 -
showSlide(index)函数只负责渲染，不做加减运算；所有索引计算由plusSlides(n)或自动轮播回调完成 - 自动轮播的回调里别写
currentIndex++，改用currentIndex = (currentIndex + 1) % slides.length
如何让切换带淡入淡出而不是硬切
纯改 display 或 src 没过渡效果，用户感知生硬。CSS transition 必须配合 opacity 和 position 控制图层叠放顺序，否则多张图会堆叠显示或闪烁。
- 所有图片用
position: absolute; top: 0; left: 0;叠在一起 - 给容器设
position: relative; overflow: hidden; - 每张图加
transition: opacity 0.4s ease;，初始opacity: 0，当前图设opacity: 1 - 不要只靠
opacity切换——得同步控制z-index，否则新图可能被旧图挡住；建议每次只让一张图z-index: 2，其余z-index: 1
最易被忽略的是 hover 暂停后恢复逻辑：只清定时器不够，还得记录暂停时刻的 currentTime，resume 时用 setTimeout 补足剩余时间，否则一 hover 就卡住 3 秒再继续，节奏全乱。真实项目里，这点比动画效果还影响体验。
前端入门到VUE实战笔记：立即使用
在学习笔记中，你将探索 前端 的入门与实战技巧！
