必须用 JavaScript 实现真正轮播，HTML 仅负责结构；setInterval 是自动切换的必备起点，需存变量以便清除，配合 classList 切换显隐比直接操作 style 更可靠，伪 CSS 轮播无法自动播放且缺乏交互控制能力。
必须写 JS，纯 HTML 无法实现真正轮播。
HTML 只是结构描述语言，<img> 标签能插入图片，但不能“切换”“定时”“响应点击”。所谓轮播，本质是运行时控制显隐、位移或 src 替换——这些动作只能由 JavaScript 驱动。
setInterval 是自动轮播不可绕过的起点
不写 JS 就想自动播？不存在。setInterval 是最直接、最低门槛的触发方式，3000 毫秒切一张图，逻辑清晰：
- 必须用它启动定时器，否则图片永远静止
- 数值单位是毫秒，
3000≠3，写错就变成 3 毫秒狂闪 - 定时器变量（如
slideInterval）要存起来，否则无法清理，导致多个定时器叠加冲突 - 切换前必须先清除旧
active类或display: block状态，否则多张图同时显示
classList 切换比 style.display 更可靠
用 display: none/block 虽简单，但容易踩坑：
Comprehensive Three.js 3D graphics reference
下载
详细的 Three.js 3D 图形参考，涵盖场景设置、相机、几何体、材质、光照、动画、控制器、加载器、数学工具和调试。
立即学习“前端免费学习笔记（深入）”；
-
<img>是替换元素，设display: inline会引入行内间隙，撑开容器 - 所有图片需统一初始隐藏，靠 JS 动态加
active类比反复操作style属性更可控 - CSS 中用
.carousel-item:not(.active) { display: none; }比遍历 DOM 改style更轻量 - 如果后续加动画，
opacity+transition必须配合display: block，而visibility: hidden仍占布局空间，会导致高度跳变
不写 JS 的“CSS 轮播”只是伪轮播
有人用 input[type="radio"] + :checked + ~ 选择器模拟切换，但它：
- 完全无法自动播放，用户不点就不动
- 每张图都要写一组
input+label+img，3 张图代码量翻三倍 - 图片路径写死在 HTML，无法动态加载或错误兜底
-
@keyframes动画周期必须精确匹配图片数 × 单张停留时间，稍有偏差就错帧 - 无暂停/恢复/跳转能力，移动端也无法响应触摸滑动
这种方案只适合静态宣传页，且维护成本远高于一行 setInterval。
轮播最难的不是让图动起来，而是让“动”不打架：手动点按钮时，定时器得停；鼠标移入要暂停，移出得续上；索引越界时别崩；页面多个轮播共存时不互相干扰。这些边界逻辑，没有 JS 就没地方安放。
