最小可行轮播图需div容器、img元素和display: none显隐控制；HTML用carousel外层包裹img并设宽高；CSS设display:none/block与overflow:hidden；JS须清理定时器、先隐藏所有再显示目标图。
不需要框架、不依赖库，HTML轮播图的最小可行基础就三样：div容器、img元素、display: none控制显隐。其他都是锦上添花。
HTML结构必须用包住所有![制作HTML轮播图需要什么基础？]()
别把一堆img直接扔进body，也别塞进ul或figure里凑数——JS选中、CSS定位、后续扩展都会变麻烦。正确做法是：一个外层div class="carousel"，里面放所有img（或再套一层div class="carousel-images"）。每张图带alt和明确宽高（如width="600" style="max-width:90%"），避免布局抖动。
CSS只需设好隐藏与定位
轮播不靠动画起步，先让“只显示一张”这件事稳住：
- 所有
img默认style="display: none;"（不是visibility: hidden，它占位；也不是opacity: 0，它仍响应事件）
- 当前图设
display: block（img是替换元素，inline无效）
- 容器加
overflow: hidden防图片溢出，必要时设死高度（如height: 400px）防重排跳动
JS核心就三个动作：切图、清定时器、防冲突
自动轮播崩得最勤快的地方，永远是定时器没清理干净：
立即学习“前端免费学习笔记（深入）”；
- 用
let carouselTimer = null全局存定时器ID
- 每次启动前先
clearInterval(carouselTimer)，再setInterval
-
mouseenter时清掉，mouseleave时重开；手动点按钮后也必须重置定时器
- 别用
setTimeout递归——不好统一清理，还可能堆栈溢出
真正容易被忽略的点是：切换顺序不能反——必须先遍历所有img设回display: none，再设目标图display: block。漏掉这一步，残留图会叠在当前图上面。
别把一堆img直接扔进body，也别塞进ul或figure里凑数——JS选中、CSS定位、后续扩展都会变麻烦。正确做法是：一个外层div class="carousel"，里面放所有img（或再套一层div class="carousel-images"）。每张图带alt和明确宽高（如width="600" style="max-width:90%"），避免布局抖动。
CSS只需设好隐藏与定位
轮播不靠动画起步，先让“只显示一张”这件事稳住：
- 所有
img默认style="display: none;"（不是visibility: hidden，它占位；也不是opacity: 0，它仍响应事件） - 当前图设
display: block（img是替换元素，inline无效） - 容器加
overflow: hidden防图片溢出，必要时设死高度（如height: 400px）防重排跳动
JS核心就三个动作：切图、清定时器、防冲突
自动轮播崩得最勤快的地方，永远是定时器没清理干净：
立即学习“前端免费学习笔记（深入）”；
- 用
let carouselTimer = null全局存定时器ID - 每次启动前先
clearInterval(carouselTimer)，再setInterval -
mouseenter时清掉，mouseleave时重开；手动点按钮后也必须重置定时器 - 别用
setTimeout递归——不好统一清理，还可能堆栈溢出
真正容易被忽略的点是：切换顺序不能反——必须先遍历所有img设回display: none，再设目标图display: block。漏掉这一步，残留图会叠在当前图上面。
