display: none 切换最稳，先清空所有图片显示再设目标为 block；setinterval 需配 clearinterval 防重复；索引越界应赋值修正而非累加，避免负值或无限递减。
display: none 切换是最稳的起点，别一上来就搞 transform 或 opacity 动画——图片没显示对，动得再 fancy 也没用。
怎么让三张图只显示一张？先清空再设显
核心不是“显示这张”，而是“确保只有这张显示”。浏览器不会自动帮你隐藏其他 img 元素。
- 给所有轮播
img默认加style="display: none;"（或统一 class + CSS 规则） - 切换时，先遍历所有
img，全部设回display: none - 再把目标索引那张设为
display: block（注意：img是替换元素，inline不生效） - 常见错误：只设目标为
block，忘了清前面的——结果多张图叠在一起
setInterval 自动轮播必须配 clearInterval
不清理旧定时器，用户点一次按钮，就多一个 setInterval 在后台跑，几秒后图片开始乱跳。
- 定义全局变量
let intervalId = null - 每次启动前先执行
clearInterval(intervalId) -
next()和prev()执行完都调用重置函数，比如resetTimer() - 给轮播容器加
mouseenter/mouseleave监听，悬停暂停、移出恢复（移动端可忽略）
索引越界怎么处理？别用 += 累加
原始逻辑写 slideIndex += n 是最大陷阱：点两次“上一张”，slideIndex 变成 -1 → -2 → -3，永远卡在边界外。
- 正确做法是直接赋值：
slideIndex = n，然后做边界修正 - 循环逻辑用取余容易翻车：
(idx + 1) % imgs.length要求imgs.length > 0，否则% 0报错 - 更安全的写法：
slideIndex = (slideIndex % slides.length) || slides.length（正向）或slideIndex = slideIndex （反向） - DOM 查询推荐用
querySelectorAll('img')，比getElementsByClassName返回的类数组更可靠
图片加载失败怎么办？别等白屏才反应
轮播图里 src 切换后，如果图片 404 或加载慢，会闪白或卡住——这不是 JS 问题，是资源问题。
- 切换前先创建
new Image()实例，监听onload和onerror - 只在
onload触发后才真正设置imgEl.src并显示；onerror时跳过或 fallback 到默认图 - 避免重复绑定
onload：每次切换前先解绑，或用一次性监听（once: true） - 页面切到后台时（
visibilitychange），建议暂停定时器，省资源也防错帧
前端入门到VUE实战笔记：立即使用
在学习笔记中，你将探索 前端 的入门与实战技巧！
