轮播图本质是状态管理问题，需理清当前显示、切换方式、触发时机、用户干预响应四点；dom结构须满足容器尺寸明确、图片同级同父、导航元素带data标识；切换逻辑应先确保单图可见再加动画，定时器需手动清理，索引计算统一用取余避免越界。
轮播图不是靠“加个插件”就完事的，它本质是状态管理问题：当前显示哪张、怎么切、何时切、用户干预后如何响应。不先理清这四点，代码写得再花哨也容易崩。
轮播图的 DOM 结构必须满足三个定位前提
浏览器不会自动识别“这是轮播”，所有逻辑都依赖你搭的结构是否可被 JS 稳定定位和操作。
-
carousel容器必须有明确尺寸（width/height），且overflow: hidden，否则图片会溢出或撑高容器 - 所有图片必须同级、同父容器（如
.carousel-images），不能嵌套在不同div里，否则querySelectorAll('img')会漏掉 - 导航按钮和指示点要带可编程标识：按钮用
data-direction="next"，指示点用data-index="2"，别依赖 class 名顺序——DOM 顺序可能被 CSS 改变
用 display: none 切换比 transform 更适合初学者
新手常卡在“图片没动”或“动了但重叠”，根源往往是过早引入动画逻辑。先让“只有一张可见”这件事 100% 可靠，再加过渡。
- 所有
img默认设style="display: none;"，包括 HTML 写死的；别依赖 CSS 规则，JS 控制才可控 - 切换时，先遍历所有
img执行el.style.display = 'none'，再对目标索引的那张设'block'；顺序反了就会残留 - 不要用
visibility: hidden替代——它仍占文档流，可能让.carousel高度忽大忽小 - 如果要用
transform或opacity，必须配合transition且只作用于当前激活项，否则所有图片都会同时动
setInterval 自动轮播必须配手动清理
不清理定时器是轮播失控最常见原因：用户狂点按钮、鼠标进出频繁、切换太快，都会导致多个 setInterval 并发运行，图片乱跳甚至卡死。
- 定义全局变量
let intervalId = null，每次启动前先clearInterval(intervalId) - 把轮播逻辑封装成独立函数（如
showImage(index)），setInterval里只调它，方便复用和调试 - 在
next()、prev()、goTo(index)末尾都调一次resetTimer()，重置倒计时 - 给容器加
mouseenter/mouseleave监听来暂停/恢复，但注意移动端无hover，别强依赖
循环索引必须用取余，不能硬写 if 判断边界
写 if (index === images.length - 1) index = 0 看似直观，但一旦加入“上一张”逻辑，很容易漏掉负数越界（比如 index = -1）。
- 统一用
index = (index + len) % len，其中len = images.length，正负都能兜住 - 别在
next()里直接index++，先算好新索引再传给showImage() - 指示点同步也要走同一套索引计算，避免图片和点不同步
- 如果要做“无缝轮播”（最后一张后接第一张视觉连贯），那是
transform位移+克隆首尾图的事，和索引循环是两层问题，别混在一起解决
最容易被忽略的是：轮播不是“让图片动”，而是“让状态可信”。DOM 是否干净、定时器是否唯一、索引是否闭环——这三个点稳了，加动画、加触摸、加懒加载才不会翻车。
前端入门到VUE实战笔记：立即使用
在学习笔记中，你将探索 前端 的入门与实战技巧！
