无缝衔接需克隆首尾图片并用transform位移重置：dom变为[n-1]+[0..n-1]+[0]共n+2项，视口滑动中间n项；位移增量须严格等于单图宽度，用getboundingclientrect动态获取；transitionend监听重置，禁用定时器；兼容webkittransitionend；容器宽固定、item宽一致、连点防叠加、悬停同步索引。
无缝衔接不是靠 CSS animation: infinite 或写死的 margin-left 动画就能搞定的——浏览器不会自动把最后一张图“接”到第一张前面，必须手动克隆、用 transform: translateX() 位移，并在动画结束时瞬移重置。
为什么必须克隆首尾两张图？
真实 DOM 只有 n 张图时，索引范围是 0 到 n-1。向右切到最后一张（n-1）后再点一次“下一张”，逻辑上该回到 0，但 DOM 里根本没有“第 n 张”，只能跳变。
克隆后 DOM 变成：[n-1]（克隆末项） + [0, 1, ..., n-1] + [0]（克隆首项），共 n+2 项。视口始终在中间 n 项内滑动，边界切换只需瞬移 translateX() 值，人眼看不到跳帧。
将调研报告、方案对比、数据分析、需求梳理、会议纪要、设计说明、代码评审、学习笔记等任务产物输出为可在浏览器直接打开的单文件 HTML，替代 Markdown 作为最终交付物。Markdown 在信息密度、视觉清晰度和可分享性上已跟不上 AI 产物的丰富度，HTML 能同时承载排版、表格、SVG 等。
- 克隆最后一张插到开头，解决向左切过头时的右跳问题
- 克隆第一张追加到末尾，解决向右切过头时的左跳问题
- 初始
transform必须设为translateX(-图宽)，让原第0张正好居中（此时显示的是开头克隆的末项）
位移计算和 transitionend 重置怎么写才不撕裂？
每次点击按钮，位移增量必须严格等于单张图宽度（含 padding/margin），否则克隆图对不齐，会露半张图或黑边。别写死 800px，用 getBoundingClientRect().width 动态读取更可靠。
- 向右切：位移 += 图宽；向左切：位移 -= 图宽
- 监听
transitionend事件，而不是用setInterval定时重置——CPU 负载高时，定时器仍准时触发，可能打断动画造成撕裂 - 到达假末尾（索引 ===
n）时，先设element.style.transition = 'none'，再瞬移translateX(-图宽)，最后用setTimeout(() => { element.style.transition = 'transform 0.3s ease-in-out' }, 10)恢复过渡 - 注意兼容性：
transitionend在 Safari 是webkitTransitionEnd，建议封装成统一事件名
常见踩坑点：DOM 结构、样式和 JS 同步
克隆顺序错了、容器宽度没固定、carousel-item 宽度不一致，都会导致位移偏移。JS 层如果没处理好快速连点，还会出现动画叠加、索引错乱。
-
carousel-track容器宽度必须是固定值（如100vw或具体像素），不能是width: 100%或flex: 1 - 所有
carousel-item必须宽度严格一致，建议用flex-shrink: 0+width: calc(100% / n)（n 为真实图数），而非百分比或flex: 1 - 每次点击前必须
clearInterval(timerId)；交互完成要等transitionend后再重启自动轮播，否则鼠标移出瞬间就跳下一帧 - 悬停暂停要用
mouseenter/touchstart，恢复用mouseleave/touchend，且要同步更新当前索引，不然 resume 后会跳帧
最易被忽略的是：克隆后的 DOM 索引和用户看到的“第几张”必须做映射，而不仅仅是按数组下标操作；还有重置位移那一步，transition = 'none' 和 setTimeout 恢复缺一不可，少一个就会看到反向动画或卡顿。
前端入门到VUE实战笔记：立即使用
在学习笔记中，你将探索 前端 的入门与实战技巧！
