最可行方案是setInterval配合img.complete检查和定时器清理，用querySelector控制显隐，CSS绝对定位叠图并控制显示，避免闪白、重复轮播或卡死。
直接用 setInterval 控制定时切换最可行，但必须配合 img.complete 检查和定时器清理，否则首屏加载慢时会闪白、重复轮播或卡死。
用 setInterval + querySelector 控制显隐切换
这是兼容性最好、逻辑最直白的方案，适合静态页或轻量需求。核心不是“动图”，而是控制哪张 img 显示，其余隐藏。
- 别用
getElementsByClassName，它返回类数组对象，后续遍历时容易出错；统一用document.querySelectorAll('.slide')拿到 NodeList - 每次调用
setInterval前，先用clearInterval(this.timer)清掉旧定时器，否则鼠标反复悬停/移出会导致多个定时器并发运行 - 切换前检查
img.complete：如果为false，跳过本次切换，避免显示空白帧 - CSS 里把所有图片设为
position: absolute叠在一起，只给当前项加display: block或opacity: 1
用 transform: translateX() 实现滑动效果
想有左右平滑位移感，就得放弃显隐切换，改用位移 + 过渡。关键在容器布局和偏移值计算，不是 JS 逻辑复杂，而是 CSS 容易漏配。
- 父容器必须设
overflow: hidden，否则图片会溢出可见区域 - 所有图片需等宽，且包裹容器用
display: flex或white-space: nowrap水平排列，否则translateX(-n * width)会偏移不准 -
transition必须写死在 CSS 里（如transition: transform 0.3s ease-in-out），不要用 JS 动态改style.transition，Safari 会不触发重绘 - 移动端必须监听
touchstart/touchend，仅靠mouseenter在手机上完全无效
用 IntersectionObserver 控制轮播启停
页面有多个轮播图，或轮播图不在首屏时，一直跑 setInterval 是资源浪费。视口可见才启动，是更合理的做法。
立即学习“前端免费学习笔记（深入）”；
- 初始化时不要立即启动定时器，先用
new IntersectionObserver监听容器是否进入视口 -
isIntersecting为true时调用start()（内部执行setInterval）；false时调用stop()（内部clearInterval） - 注意：IE 不支持
IntersectionObserver，如需兼容，得 fallback 到getBoundingClientRect()+scroll节流 - 懒加载图片建议用
loading="lazy"属性，比 JS 判断更轻量，但需确认浏览器支持度
常见错误导致轮播卡住或闪屏
多数问题不出在 JS 逻辑，而在于 DOM 状态和资源加载没对齐。最容易被忽略的是图片加载时机和索引越界。
- 切换时直接改
src：网络慢时新图未加载完，img就已显示，造成空白帧；应先创建Image实例，监听onload后再替换 DOM 中的src - 索引没做模运算：比如 3 张图，当前索引是 2，下一张该是 0，但代码写了
index++后直接取slides[index]，结果undefined，JS 报错中断 - 没处理
resize：响应式页面宽度变化后，图片宽度变了，但translateX偏移值还是按旧宽度算，最后一张图会卡在半路 - 无障碍缺失：没给轮播容器加
role="region"和aria-live="polite"，屏幕阅读器无法感知内容更新
轮播真正的难点不在“怎么动”，而在“什么时候不该动”——图片没加载完不动、不在视口不动、用户正在交互时不动。这些判断点一旦漏掉一个，体验就断层。
