轮播框架应先搭建HTML结构再实现逻辑：用<div class="carousel">容器包裹图片和导航按钮，图片放于.carousel-images内并默认display:none，导航用带data-index的button，通过JS控制当前图片display:block，索引用取余处理循环，定时器需清理防冲突。
轮播框架不用从零写，先用 HTML + CSS + JavaScript 搭个最小可用结构
零基础硬啃轮播逻辑容易卡在“怎么让图片动起来”，其实第一步不是写 JS，而是把三块拼图摆对位置：一个容器、一组图片、一组导航点。浏览器原生不提供轮播组件，但也不需要立刻学框架——用 <div> 包住 <img>，再加几个 <button> 就能跑起来。
实操建议：
- 用
<div class="carousel">作为外层容器，所有轮播元素都放里面 - 图片统一放进
<div class="carousel-images">，每张图用<img src="..." alt="...">，别用<picture>或懒加载属性（初学先关掉复杂性） - 导航点用
<button type="button" data-index="0">，不要用<span>或<a>，避免默认跳转或焦点问题 - 先写死 3 张图，不要动态生成，调试时能一眼看出哪张在显示
display: none 切换图片是最直白的显示控制方式
初学最容易想用 transform: translateX() 或 opacity 动画，但隐藏/显示逻辑本身比动画更关键。先把“当前只显示一张”这件事做稳，再加过渡效果。
常见错误现象：所有图片叠在一起、点击按钮没反应、第2张图显示时第1张还残留。
立即学习“前端免费学习笔记（深入）”；
实操建议：
- 给所有
<img>默认加style="display: none;" - 用 JS 找到当前要显示的那张图，设为
style="display: block;"（不是inline，img是替换元素） - 别用
visibility: hidden替代display: none，前者仍占布局空间，可能撑开容器高度 - 切换前先遍历所有
<img>清掉display: block，再设新的——顺序不能反
自动轮播用 setInterval，但必须配手动暂停和恢复
只写 setInterval(() => { next(); }, 3000) 很危险：用户点按钮后，定时器还在跑，导致图片乱跳；鼠标悬停时也该停，否则体验反直觉。
使用场景：用户没操作时自动播，一碰就停，移开继续（可选），点按钮重置计时器。
实操建议：
- 定义变量
let intervalId = null，每次启动前先clearInterval(intervalId) - 在
next()和prev()函数末尾调用resetTimer()，避免多个定时器并发 - 给
.carousel加mouseenter和mouseleave监听，暂停/恢复定时器（注意：移动端没有 hover，可跳过） - 别在
setInterval里直接写 DOM 操作，先封装成showImage(index)再调用，方便复用
轮播索引越界时的边界处理不能靠 if (index > length) 硬判断
用户狂点下一张，index 变成 5、6、100，再用 if 套一层层判断，代码很快变臃肿。轮播本质是循环，数学上用取余最干净。
参数差异：index % images.length 是循环向后，(index + images.length) % images.length 能兼容负数（比如上一张点太多变成 -1）。
实操建议：
- 获取图片列表用
document.querySelectorAll('.carousel-images img')，别用getElementsByClassName（返回 HTMLCollection，不支持forEach） - 设当前索引
let currentIndex = 0，每次next()做currentIndex = (currentIndex + 1) % images.length - 上一张用
currentIndex = (currentIndex - 1 + images.length) % images.length，加images.length防负数取余失效 - 导航按钮激活状态同步更新：遍历所有
button，用button.classList.toggle('active', i === currentIndex)
轮播看着简单，但索引管理、定时器清理、DOM 状态同步这三处最容易漏掉细节，写完跑一次不等于跑得稳。先确保手动点能切图，再加自动播，最后调样式——顺序反了，debug 成本会指数上升。
