纯html+css+js可实现高性能轮播图，关键在于用transform: translatex()替代margin-left/left以避免重排、配合flex布局与固定宽高防塌陷，并通过clearinterval+ispaused控制定时器防叠加。
纯 HTML + CSS + JS 就能跑通轮播图，不需要引入任何库。关键不是“炫”，而是切得准、停得稳、不塌、不卡。
为什么用 transform: translateX() 而不是 margin-left 或 left
改 margin-left 或 left 会触发 layout（重排），尤其图片尺寸未固定时，页面可能跳动；transform 只走合成层，GPU 加速，性能更稳。
-
transform不影响文档流，容器高度不会随切换抖动 - 必须给
.carousel-inner设display: flex，每张图用min-width: 100%占满视口 - 切到第
n张时，执行translateX(-${n * 100}%)，索引从 0 开始 - 别漏写
transition: transform 0.4s ease，否则是瞬切
setInterval 必须配 clearInterval 和暂停开关
只写 setInterval(nextSlide, 3000) 是危险操作：鼠标悬停还在切、点按钮后定时器没停、页面切走再回来可能叠加多个定时器。
- 声明全局变量
let carouselTimer = null - 每次启动前先
clearInterval(carouselTimer) - 用布尔值
isPaused控制是否执行nextSlide()，而非直接清 timer -
mouseenter时设isPaused = true，mouseleave时重置 timer（不是简单 restart） - 左右按钮点击也需设
isPaused = true，避免手动切完立刻被自动逻辑覆盖
图片加载失败时轮播图不塌陷的硬性处理
本地看着好好的，一上线就变一条细线——大概率某张图 404 或跨域被拒，<img> 高度为 0，整个 .carousel-inner 高度塌掉。
- 所有
<img>必须带width和height属性（如width="800" style="max-width:90%"），强制占位 - 容器
.carousel设死高度，例如height: 450px，不依赖子元素撑开 - 加
onerror回调兜底：<img src="x.jpg" onerror="this.style.display='none'">，隐藏坏图但保结构 - 避免用
<picture></picture>或<source></source>开局——先确保单尺寸能跑通，再加响应式
最易被忽略的是：轮播容器高度必须锁定，且所有图片宽高属性不可省；transform 切换必须配合 flex 布局和百分比位移，否则索引错位或溢出不可控。
前端入门到VUE实战笔记：立即使用
在学习笔记中，你将探索 前端 的入门与实战技巧！
