纯html无法实现轮播图，必须用javascript控制dom更新与状态切换；需确保setinterval不失控、img.complete被校验、transform在safari中流畅、hover可暂停，并通过intersectionobserver优化视口外轮播。
纯 HTML 无法实现轮播图，必须靠 JavaScript 控制 DOM 更新和状态切换；所谓“最佳实践”，不是选最炫的动画，而是让 setInterval 不失控、img.complete 不被忽略、transform 在 Safari 里不卡顿、用户一 hover 就能停住——这些才是真实项目里天天踩坑的地方。
为什么直接改 img.src 会导致闪屏
网络慢时，新图片还没加载完，旧 img 元素就被替换了，DOM 中出现空白帧。更糟的是，如果没检查 img.complete，脚本会强行切换到一张正在加载中的图，视觉上就是“白一下再出来”。
- 每次切换前必须判断
currentImg.complete === true，否则跳过本次轮播 - 不要用
src赋值后立刻显示，应监听load事件，或用IntersectionObserver预加载首屏图 - 若需 fallback，可先设
opacity: 0，等load后再opacity: 1，避免突兀出现
setInterval 必须配 clearInterval 才安全
常见错误是反复调用轮播初始化函数（比如组件重渲染、tab 切换后重新挂载），但忘了清除上一个定时器，结果多个 setInterval 并行跑，图片疯转或卡死。
- 把定时器 ID 存在闭包变量或元素 dataset 里，例如
el.dataset.timerId = setInterval(...) - 暴露
pause()和resume()方法，pause内必须调用clearInterval，且将变量置为null - 在
resume里重新赋值定时器 ID，别复用旧值
CSS transform 平滑滑动的关键约束
用 translateX 实现横向滑动看似简单，但错一个像素或漏一条声明，Safari 就不触发硬件加速，动画卡成 PPT。
- 父容器必须设
overflow: hidden，否则位移后图片溢出可见 - 所有
.carousel-item宽度要严格一致，建议用flex-shrink: 0防止压缩，别依赖width: 100% -
transition必须写死在 CSS 里，如transition: transform 0.3s ease-in-out；JS 动态改style.transition在 Safari 15+ 会失效 - 加
will-change: transform或transform: translateZ(0)触发 GPU 加速，尤其在 iOS 上效果明显
视口外轮播该不该停
页面有多个轮播图，或轮播图在长页底部，用 setInterval 一直跑是资源浪费，还可能干扰 LCP 指标。
- 用
IntersectionObserver监听是否进入视口，isIntersecting === true时才启动轮播 - 离开视口时调用
pause()，回来再resume()，比全局开关更精准 - 注意兼容性：IE 不支持，需降级为始终运行（或直接用 polyfill）
真正难的不是让图动起来，而是让动得稳、停得准、切得顺、省得狠——尤其是当用户从桌面切到 iPad，又划到 Safari，再点进某个 tab 时，所有这些细节都会浮出水面。
前端入门到VUE实战笔记：立即使用
在学习笔记中，你将探索 前端 的入门与实战技巧！
