最稳妥方案是用 setinterval + queryselector 控制图片切换，需清空旧定时器、检查 img.complete、暴露暂停/恢复方法，并结合 css transform 实现平滑滑动，同时兼顾 intersectionobserver 懒加载与可访问性支持。
用 setInterval + querySelector 控制图片切换最稳妥
纯 HTML 无法实现轮播，必须靠 JS 控制 DOM 更新。用 setInterval 定时切换 src 或显隐状态是入门级方案，兼容性好、逻辑直白，适合静态页面或轻量需求。
常见错误是直接改 img 的 src 导致闪屏（尤其网络慢时），或忘记清空上一个定时器造成多个轮播同时跑。
- 先用
document.querySelector拿到轮播容器和所有img元素，别用getElementsByClassName返回类数组，后续操作容易出错 - 切换前用
img.complete判断图片是否加载完成，没加载完就跳过本次切换，避免空白帧 - 每次调用
setInterval前，用clearInterval清掉旧的，防止重复绑定 - 轮播暂停/恢复要暴露方法，比如 hover 轮播图时调用
clearInterval，mouseout时重新setInterval
用 CSS transform + transition 实现平滑滑动
如果想有左右滑动效果而不是简单替换，就得用 CSS 位移。核心是把所有图片横向排成一行，用 transform: translateX() 移动容器，配合 transition 做缓动。
容易踩的坑是：父容器没设 overflow: hidden 导致图片溢出；translateX 值算错导致最后一张图卡住；或者在 Safari 上遇到 transform 重绘不触发的问题。
立即学习“前端免费学习笔记（深入）”；
- 图片容器要用
display: flex或固定宽度 +white-space: nowrap，确保图片水平排列 - 每张图宽度必须一致，否则
translateX(-n * width)会偏移不准 - 过渡时间写死在 CSS 里（如
transition: transform 0.3s ease-in-out），别用 JS 动态改style.transition，否则 Safari 可能不生效 - 移动端需加
touchstart/touchend手势支持，仅靠鼠标事件在手机上完全不可用
IntersectionObserver 替代定时器做懒加载式轮播
当页面有多个轮播图，或轮播图不在首屏时，用 setInterval 一直跑会浪费资源。用 IntersectionObserver 监听是否进入视口，只在可见时启动轮播，更合理。
典型问题是：观察器回调里没做节流，频繁触发导致重复初始化；或没监听 isIntersecting 状态变化，导致滚动离开后还在自动播放。
- 创建
IntersectionObserver时传入{ threshold: 0.1 }，表示 10% 进入视口就算可见 - 在回调里判断
entry.isIntersecting为true才调用startCarousel()，为false时调用stopCarousel() - 每个轮播图实例要保存自己的
intervalId和observer引用，避免互相干扰 - 注意兼容性：IE 不支持，需降级到
getBoundingClientRect+scroll事件模拟
轮播图焦点管理与键盘导航不能漏
很多轮播图一按 Tab 键就跳过整个组件，或者方向键无效，这对可访问性是硬伤。必须手动处理 tabindex、keydown 和焦点流转。
常见疏忽是：只给按钮加 tabindex="0"，但没给轮播图容器加 tabindex="-1" 以便 JS 聚焦；或者监听了 keydown 却没 preventDefault，导致页面滚动被干扰。
- 轮播图外层容器加
tabindex="-1"，首次聚焦时用.focus()主动唤起，让用户知道组件可交互 - 左右按钮用
button标签而非div，天然支持空格/回车触发 - 监听
keydown时捕获ArrowLeft/ArrowRight，并立即event.preventDefault() - 每切换一张图，用
aria-live="polite"区域播报当前第几张，例如：<div aria-live="polite" class="sr-only">第 2 张，共 5 张</div>
轮播图真正的复杂点不在动画，而在生命周期控制和交互边界——什么时候该停、谁有权限停、停了之后状态怎么同步，这些细节堆起来，比写个 transform 难得多。
