轮播图可用原生html+css+js实现，关键在三层结构（div.carousel→div.carousel-inner→img）、定时器管理（clearinterval+setinterval）、显隐控制（display:none/block）、索引循环（取余运算）及状态同步。
轮播图不是必须用框架才能做，原生 HTML + CSS + JS 就能跑稳，关键在结构对、状态清、定时器不打架。
怎么组织 HTML 结构才不容易错
结构错一个层级，JS 就找不到元素，CSS 也压不住定位。最简但健壮的写法是三层嵌套：div.carousel 包 div.carousel-inner，里面只放 img 标签（别用 picture 或带 loading="lazy" 的图，初学先关掉干扰项）。
- 所有
img默认加style="display: none;"，包括第一张——别依赖 CSS 类初始隐藏，容易漏 - 不要用
ul/li包图，除非你真要用 flex 滚动；div.carousel-inner img是最直白、最易调试的选择 - 左右按钮用
button type="button"，避免点击触发表单提交或页面跳转 - 指示点（dots）先手动生成 DOM，比如循环创建
button data-index="0"，别等 JS 动态算数量再插，调试时一眼能数清
为什么 setInterval 容易让轮播“自己乱跳”
因为没人管它。只写 setInterval(next, 3000)，用户点下一张后，旧定时器还在跑，两秒后又切一次，图片就跳帧甚至跳回第一张。
- 必须用变量存定时器 ID：
let timerId = null - 每次启动前先
clearInterval(timerId)，包括在next()、prev()、点 dot 后 - 鼠标悬停暂停只加
mouseenter/mouseleave，移动端没 hover，不用强加 touchstart/touchend - 自动播放重置逻辑要统一入口：所有手动操作后都调
resetTimer()，里面做clearInterval+timerId = setInterval(...)
display: none 切换比 opacity 或 transform 更可靠
初学者常一上来就写 opacity: 0 → 1 动画，结果发现图片叠在一起、高度塌陷、点击区域错位——因为 opacity: 0 的元素仍占文档流，而 display: none 才真正“消失”。
- 切换前先遍历所有
img，统一设style.display = "none" - 再设当前那张
style.display = "block"（img是替换元素，inline不生效） - 别用
visibility: hidden替代，它保留布局空间，可能撑开容器导致滚动条或父级高度异常 - 过渡效果可以后续加：
img { transition: opacity 0.3s ease; }，但前提是显隐逻辑已稳
索引越界和循环怎么不出 bug
三张图，索引从 0 开始，点“上一张”到 -1 时该显示第 3 张；点“下一张”到 3 时该回到第 0 张。硬写 if-else 容易漏边界，取余最稳。
- 当前索引用
let currentIndex = 0，全局变量或闭包内维护 -
next()里写currentIndex = (currentIndex + 1) % totalImages -
prev()里写currentIndex = (currentIndex - 1 + totalImages) % totalImages（减法取余要加模数防负） -
totalImages用document.querySelectorAll('.carousel-inner img').length获取，别手写数字，改图不用改 JS
轮播最麻烦的从来不是“怎么动”，而是“什么时候不该动”——用户正在点按钮、鼠标还悬在上面、上一个定时器还没被清理。这些状态交叉点，才是实际项目里 debug 半天的地方。
前端入门到VUE实战笔记：立即使用
在学习笔记中，你将探索 前端 的入门与实战技巧！
