图片轮播核心是状态同步：定时器、索引、transform位移、指示点、加载状态、触摸锁必须严丝合缝；推荐setInterval+translateX方案，注意clearInterval防重复、img.complete防闪屏、动态宽度计算、touch事件适配及吸附逻辑。
setInterval 控制图片切换是最直接、兼容性最好的起点，但不加防护容易翻车；用 transform: translateX() 滑动比改 display 或 opacity 更顺滑，也更可控。
用 setInterval 切换 src 是最简方案，但要注意加载状态
适合只有 3–5 张图、无动画需求的静态页。核心就是定时更新 <img> 的 src 属性。
- 必须先检查
img.complete，否则网络慢时会闪白屏或空白帧 - 每次调用
setInterval前，务必用clearInterval(timerID)清掉旧定时器，否则 hover 暂停后恢复，可能同时跑两个轮播 - 索引递增要用
currentIndex = (currentIndex + 1) % images.length，硬写if (currentIndex === images.length - 1) currentIndex = 0容易漏边界 - 别用
getElementsByClassName获取元素——它返回的是实时 HTMLCollection，后续 DOM 变更可能导致索引错乱；改用querySelectorAll+Array.from()
transform: translateX() 滑动需同步位移与索引，否则逻辑断裂
横向滑动效果依赖容器内所有图片水平排列，靠移动父容器实现“切换”。看似只是 CSS 动画，实则 JS 状态必须严丝合缝。
anything-to-html
下载
将调研报告、方案对比、数据分析、需求梳理、会议纪要、设计说明、代码评审、学习笔记等任务产物输出为可在浏览器直接打开的单文件 HTML，替代 Markdown 作为最终交付物。Markdown 在信息密度、视觉清晰度和可分享性上已跟不上 AI 产物的丰富度，HTML 能同时承载排版、表格、SVG 等。
- 容器必须设
overflow: hidden，否则滑出部分会露出来 - 位移值不能硬写
-300px，得用carouselItem.getBoundingClientRect().width动态读取单张宽度（含 gap） - 用户点第 3 个指示点时，要同时做三件事：更新
currentIndex、设置style.transform、高亮对应data-index的指示点——缺一不可 - 快速连点会导致动画未结束就触发新位移，建议加
isTransitioning标志位，在transitionend回调里重置
移动端滑动必须监听 touchstart/touchend，mousemove 在手机上无效
PC 上用鼠标拖拽能凑合，但真机上 mousemove 根本不会触发。而且仅靠 clientX 差值判断方向极易误判。
立即学习“前端免费学习笔记（深入）”；
- 记录
touchstart的clientX，在touchend算偏移量，绝对值小于 30 不触发切换 - 松手后要吸附：若剩余偏移量
Math.abs(offset) > width * 0.3才切下一张，否则回弹到当前图 -
touchmove中必须调用e.preventDefault()，否则页面会跟着上下滚动 - 斜向滑动时，优先看
Math.abs(dx) > Math.abs(dy)再决定是否响应横向切换
真正难的不是让图动起来，而是所有状态——索引、DOM 位移、指示点、定时器、触摸锁、图片加载完成标记——始终一致。稍有脱节，就会出现“点第三张却跳回第一张”“手动切完自动轮播突然加速”这类问题。
