纯HTML无法实现可靠图片轮播，必须用JavaScript控制定时器和DOM切换；推荐setInterval配合模运算索引、定时器清理、类名统一管理及悬停暂停等稳健策略。
纯 HTML 无法实现图片轮播——它没有逻辑控制能力，必须配合 JavaScript（或借助 CSS 动画 + :checked + ~ 选择器做伪轮播，但不可靠、难维护、无交互）。真正可用的自动轮播，核心在 JS 控制定时器和 DOM 切换。
用 setInterval + 手动切换 DOM 是最直接可控的方式
这是新手最容易理解、调试最方便的实现路径。关键不是“怎么动”，而是“怎么稳”：避免定时器叠加、图片索引越界、用户操作与自动播放冲突。
-
setInterval启动前先clearInterval已存在的定时器，防止重复点击“下一张”导致多个定时器并发 - 轮播索引用模运算更新：
currentIndex = (currentIndex + 1) % imageList.length，比if (i === len-1) i = 0更简洁且不易漏判 - 每次切换前，先移除所有图片的
active类，再给目标图片添加——不要只删上一个、只加下一个，否则状态易错乱 - 鼠标悬停时调用
clearInterval(timer)，离开时重新timer = setInterval(...)，否则用户看图时还在切
用 requestAnimationFrame 替代 setInterval 并不推荐
虽然听起来更“现代”，但对轮播这种固定间隔、非动画密集型任务，反而增加复杂度且无实质收益。
-
requestAnimationFrame的触发时机由浏览器决定，无法保证精确的 3s 切换；需自行累加时间戳判断是否到点，代码变冗长 - 暂停/恢复逻辑更难处理（比如 tab 切走后页面被节流，raf 停摆，回来时可能跳过多张）
- 移动端 WebView 或低端设备上，raf 行为不一致风险更高，而
setInterval行为稳定可预期
别碰那些“纯 CSS 轮播”的 demo
网上常见用 input[type="radio"] + :checked + ~ 选择器 + animation-delay 实现的“纯 CSS 轮播”，实际项目中基本不可用。
- 无法响应用户点击“上一张”操作（CSS 没有反向触发机制）
- 轮播项增减需同步改 HTML 结构和 CSS 动画帧数，维护成本爆炸
- 无法获取当前索引、无法绑定事件、无法与外部状态（如分页指示器）同步
- 部分浏览器对长链
~选择器或嵌套动画支持不稳定，尤其 Safari 旧版本会卡顿或失效
轮播真正的难点从来不在“怎么动起来”，而在于：用户手动操作后，自动播放是否无缝衔接；窗口失焦再激活时，计时是否准确；图片加载失败时是否有 fallback；小屏下触摸滑动是否顺滑——这些都需要 JS 层精细控制，HTML 和 CSS 只负责结构和样式。
前端入门到VUE实战笔记：立即使用
在学习笔记中，你将探索 前端 的入门与实战技巧！
