纯HTML无法实现轮播图，因其仅描述结构，需JS控制切换逻辑和CSS处理动画与布局；常见问题如静止不动、图片重叠、按钮无响应，均源于缺失JS事件绑定或CSS显隐控制。
纯 HTML 无法实现轮播图——它需要 JavaScript 控制切换，CSS 处理动画和布局。
为什么 <img> 和 <div> 自己不会动
HTML 是描述结构的标记语言，不是执行逻辑的语言。把多张图片堆在页面里，浏览器只会按顺序渲染出来，不会自动滚动、切换或加过渡效果。
常见错误现象：轮播图静止不动、所有图片叠在一起显示、点击按钮没反应，基本都是只写了 HTML 结构，漏了 JS 事件绑定或 CSS 的 display/transform 控制。
- 轮播图本质是「隐藏其他项，只显示当前项」+「定时/手动触发切换」
- 必须用 JS 操作 DOM（比如修改
className或style.display）来控制显隐 - CSS 需要定义容器尺寸、溢出裁剪（
overflow: hidden）、定位方式（position: relative/absolute）
setInterval() 切换 + classList.toggle() 控制显隐
这是最轻量、兼容性最好的手动实现方式，不依赖框架，适合学习原理或简单项目。
立即学习“前端免费学习笔记（深入）”；
使用场景：内容固定、图数不多（≤10 张）、不需要触摸滑动或复杂过渡。
- 用
setInterval()每 3 秒调用一次切换函数，记得用clearInterval()在销毁时清理，否则内存泄漏 - 每张图用一个
<div class="slide">包裹，初始只给第一张加active类，其余设为display: none - 切换函数里先移除所有
active，再给目标索引的元素加上，JS 就只管“哪张该亮”
let index = 0;
const slides = document.querySelectorAll('.slide');
function showNext() {
slides.forEach(s => s.classList.remove('active'));
slides[index].classList.add('active');
index = (index + 1) % slides.length;
}
setInterval(showNext, 3000);
CSS transform + transition 实现平滑位移
比起单纯切 display，用 transform: translateX() 做位移更流畅，且能启用 GPU 加速，避免重排重绘卡顿。
性能影响：直接改 left/top 会触发 Layout，而 transform 只走 Composite 阶段；但要注意容器需设 overflow: hidden 裁剪超出部分。
- 所有
.slide设为position: absolute，并统一左偏移（如left: 0） - 用
transform: translateX(-100%)把非当前项移出视口，当前项保持translateX(0) - 给容器加
transition: transform 0.4s ease-in-out，切换时自然过渡 - 注意：若用百分比位移，容器宽度必须固定（如
width: 100%+ 父级有明确宽），否则计算不准
别硬套“纯 HTML 教程”的代码
网上很多标题叫「HTML 轮播图」的示例，实际都悄悄引入了内联 <script> 或外部 JS 文件——它们不是纯 HTML，只是结构用 HTML 写。
容易被忽略的地方：自动播放暂停逻辑（鼠标悬停停播）、焦点管理（键盘 Tab 切换到按钮后回车触发）、图片懒加载适配（loading="lazy" 和轮播状态冲突）。这些都不是结构层能解决的，得靠 JS 主动干预。
事情说清了就结束
