原生HTML轮播图稳跑关键在结构、样式、JS三者协同：用<div class="carousel">包<div class="carousel-inner">再包多个<div class="carousel-item"><img>，每图设alt与显式宽高；CSS必设overflow:hidden和transform:translateX()防重排；JS需统一管理setInterval、isPaused锁、isTransitioning状态及currentIndex同步。
原生 HTML 轮播图不用框架也能稳跑，关键不在“炫效果”，而在三件事：结构不嵌套错、样式防重排、JS 状态不脱节。硬套 transform 或硬写 margin-left 都容易卡顿或逻辑错乱。
轮播容器和图片项怎么组织才不翻车
别用 <ul><li><img></li></ul> 套图——语义没错，但 JS 选中 .carousel-item 更直接；也别把所有 <img> 塞进单个 src 属性里，那根本不会加载。
- 外层用
<div class="carousel">，方便后续加样式和事件监听 - 图片统一包在
<div class="carousel-inner">里，每张图是独立的<div class="carousel-item"><img src="..."></div> - 每张
<img>必须带alt和显式宽高（如width="800" height="400"），否则加载失败时容器塌陷 - 不要用
<picture>或<source>开局就搞响应式——先确保固定尺寸能切，再加媒体查询
CSS 设置 overflow 和 transform 的坑在哪
overflow: hidden 是底线，没它滑出去的部分会露边；而用 transform: translateX() 切图比改 left 或 margin-left 更安全，前者走 GPU 合成，不触发重排。
- 容器必须设固定宽高，比如
height: 400px，否则translateX滑动时父容器高度可能抖动 - 移动距离不能硬写
translateX(-800px)，得用 JS 动态读取item.getBoundingClientRect().width，兼容缩放和 gap -
transition: transform 0.4s ease和setInterval间隔要匹配，比如自动轮播设 3s，过渡时间就得 ≤ 0.4s，否则手动切完立刻自动切，视觉上像“抽帧” - 别漏掉
.carousel-inner { display: flex; }，否则子项默认块级堆叠，translateX不生效
setInterval 自动轮播为什么总“假死”或“跳帧”
只写 setInterval(nextSlide, 3000) 是最常见翻车点：用户刚点到第 2 张，旧定时器还在跑，0.5 秒后又切到第 3 张；页面切走再回来，多个定时器并发运行，CPU 占满。
立即学习“前端免费学习笔记（深入）”；
- 全局存一个
let carouselTimer = null，每次启动前先clearInterval(carouselTimer) - 鼠标悬停时设
isPaused = true，离开时重置并重启定时器，不是简单clearInterval就完事 - 左右按钮点击、小圆点点击、touchend 滑动结束，都必须触发
isPaused = true并立即调用nextSlide()或goTo(index) - 加个
isTransitioning锁，动画执行中禁止响应新点击，否则transform值被覆盖，出现“闪一下又弹回”的现象
移动端 touch 滑动怎么避免误判和半路停住
PC 上用 mousemove 凑合，但手机上它根本不触发；只靠 clientX 差值判断方向也不行——手指斜着划，Y 偏移大，容易当成上下滚动。
- 必须监听
touchstart/touchmove/touchend，且在touchmove里第一时间e.preventDefault()，否则页面跟着上下滚 - 记录
touchstart的clientX，touchend时算差值，绝对值< 30不触发切换 - 滑动结束时，按剩余偏移量决定行为：
Math.abs(offset) > width * 0.3才切下一张，否则回弹到当前页 - 小圆点的
data-index必须和图片数组下标一致（从 0 开始），别写成data-index="1"却对应items[0]
最易被忽略的是状态同步：每次切换，currentIndex、translateX 值、指示点 active 类，必须在同一个函数里原子更新；拆成多步异步操作，轮播逻辑很快就会失联。
