纯HTML无法实现可用轮播图，必须用JavaScript控制；setInterval易致“越点越快”因未清除旧定时器；需全局变量管理、悬停/点击时暂停并恢复；图片须设宽高防塌陷；移动端需touch-action和preventDefault；动画状态须原子更新，避免display:none。
纯 HTML 无法实现可用的轮播图，必须靠 JavaScript 控制切换节奏和状态，否则不是卡死就是失控——这是所有翻车的起点。
为什么 setInterval 容易导致轮播“越点越快”
根本原因是没管住定时器生命周期。每次点击“下一张”就调一次 setInterval，旧的没清，新的又起，几个定时器并行跑，图片就抽风式连切。
- 全局只声明一个变量：
let carouselTimer = null - 每次启动前必须先执行
clearInterval(carouselTimer)，再赋新值 - 鼠标悬停（
mouseenter）、触摸开始（touchstart）、手动点击按钮后，都要设isPaused = true并清定时器 - 恢复时不能直接
setInterval，得用保存好的间隔时间重新设，比如carouselTimer = setInterval(next, intervalMs)
图片加载失败会让轮播塌成一条线
img 加载失败时 offsetHeight 变 0，如果容器没设固定高度，整个 .carousel 就会缩成一条缝，后面所有图片全不可见——线上最常见白屏原因。
- 每张
img必须带width和height属性（如width="800" height="450"），强制占位 - 加
onerror="this.style.display='none'"或替换成 SVG 占位符 - 避免用
background-image：它不触发onerror，也读不到自然尺寸 - 切换前检查
img.complete && img.naturalWidth > 0，未加载完就跳过本次切换
移动端滑动失效或手势冲突
iOS Safari 默认把横向 touchmove 当页面滚动处理，你的拖拽事件根本收不到；Android 也可能被浏览器手势劫持。
立即学习“前端免费学习笔记（深入）”；
- 轮播容器加 CSS：
touch-action: pan-y（允许竖向滚动）或touch-action: none（完全接管） -
touchstart里必须调event.preventDefault()，但仅在你确认要接管手势时才用 - 别只靠
clientX差值判断方向，要过滤掉Math.abs(deltaY) > 30的斜滑 - 松手后按偏移量吸附：
Math.abs(offset) > itemWidth * 0.3才触发切换，否则回弹
transition 动画不触发或“闪一下”
动画失效往往不是写错了 CSS，而是 DOM 状态没对齐。比如 opacity 切换时，上一张还没 fade out，下一张就 display: block 了，造成重叠或白屏。
- 所有状态变更（
active类、transform值、指示点高亮）必须在同一个函数内原子完成 - 用
classList切换而非反复add/remove，更安全 -
transition必须写在 CSS 里（如.carousel-item { transition: opacity 0.3s; }），JS 中改style.transition在 Safari 上常失效 - 避免用
display: none配合动画——它会清空渲染树，导致重排；改用opacity: 0; visibility: hidden;
真正的难点不在“怎么动起来”，而在“什么时候不该动”：页面切到后台、图片还在 loading、手指按住没松、用户正用键盘导航……这些边界条件比动画本身更消耗调试时间。
