纯html无法实现轮播图，必须结合css定位与javascript切换逻辑；入门推荐display:none控制显隐，配合setinterval自动轮播需用clearinterval防冲突，导航按钮宜用data-index精准取值，图片加载完成后再初始化。
纯 HTML 无法实现轮播图，必须配合 CSS 定位控制显示区域 + JavaScript 控制切换逻辑。想只靠 <img> 标签或 <picture></picture> 自动动起来，不可能。
为什么 display: none 切换最适合作为入门方案
初学者卡在“图片不动”，往往是因为过早引入 transform、opacity 或 flex 布局，反而掩盖了核心状态管理问题。
- 所有
<img>默认加style="max-width:90%"，仅当前索引那张设为display: block; - 不用
visibility: hidden：它仍占文档流高度，容易撑开容器导致滚动条或空白 - 每次切换前必须先遍历清空所有
display: block，再设新图——顺序反了就会多张同时显示 - 不依赖父容器
overflow: hidden遮丑，而是靠 DOM 状态本身保证“只有一张可见”
setInterval 自动轮播必须配 clearInterval
写死 setInterval(() => { next(); }, 3000) 是典型隐患：用户点按钮后定时器还在跑，next() 可能被连调两次，索引错乱，图片跳帧甚至白屏。
- 定义全局变量
let intervalId = null - 每次启动前先执行
clearInterval(intervalId) -
next()和prev()结尾都调用resetTimer()（里面重新setInterval并赋值给intervalId） - 给轮播容器加
mouseenter/mouseleave监听，悬停时clearInterval，移出时重置——移动端可忽略此步
导航按钮 data-index 比 class 或顺序索引更可靠
用 button[data-index="2"] 而不是 document.querySelectorAll('button')[2]，避免 DOM 顺序变动、插入新按钮或动态增删导致索引偏移。
- HTML 中每个按钮明确写
data-index="0"、data-index="1"… - JS 绑定事件时用
event.target.dataset.index取值，转成数字再用 - 不要用
this.index或闭包存索引，容易因异步或循环绑定出错 - 索引取余实现循环：比如共 4 张图，当前是第 3 张（索引 3），点“下一张”应跳到索引
(3 + 1) % 4 === 0
最容易被忽略的其实是图片加载时机：如果 JS 在 <img src> 还没加载完成时就执行 showImage(0)，可能拿到的是 0 高度或空白。建议在 window.addEventListener('load', initCarousel) 中初始化，而非 DOMContentLoaded。
前端入门到VUE实战笔记：立即使用
在学习笔记中，你将探索 前端 的入门与实战技巧！
