图片轮播核心是状态同步：定时器、索引、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 位移、指示点、定时器、触摸锁、图片加载完成标记——始终一致。稍有脱节，就会出现“点第三张却跳回第一张”“手动切完自动轮播突然加速”这类问题。

前端入门到VUE实战笔记：立即使用
在学习笔记中，你将探索 前端 的入门与实战技巧！