基础轮播需用HTML结构+CSS flex布局与overflow:hidden+JS手动管理currentIndex和transform位移；自动轮播用setInterval，手动切换后需clearInterval并重置；移动端滑动须记录touchstart/end的clientX判断方向，差值超50px才触发切换并preventDefault；动画必须用transform+opacity配合transition，禁用left/margin-left；无缝循环靠DOM克隆首尾项并逻辑索引映射实现。
用 HTML + CSS + JavaScript 实现基础轮播，别碰 jQuery 插件
纯原生实现比引入整套 jQuery 或 Swiper 更轻、更可控，尤其适合静态页或需要快速定制的场景。核心是手动管理 currentIndex、控制 transform: translateX() 位移，并用 setInterval 触发切换。
常见错误：直接用 margin-left 动画卡顿；未清除定时器导致多个轮播同时跑；点击按钮后自动轮播没重置计时器。
- 轮播容器必须设
overflow: hidden，否则图片会溢出 - 所有图片放在一个
<div class="slides">内，用display: flex横向排列 - 每次切换只改
.slides的transform，不要操作单张图的样式 - 自动轮播用
setInterval，但用户手动切换后要clearInterval再重启，避免叠加
touchstart / touchend 怎么加滑动支持
移动端不能只靠点击按钮，得响应手指拖拽。关键不是“滑动多远就跳到哪张”，而是“松手时判断方向，只做一次切换”——这样体验更符合直觉，也避免误触。
容易踩的坑：touchmove 中实时更新 translateX 会导致性能抖动；没禁用默认滚动行为（页面跟着一起上下滚）；没记录起始 clientX，导致左右判断失准。
立即学习“前端免费学习笔记（深入）”；
- 在
touchstart记录startX = e.touches[0].clientX - 在
touchend取endX = e.changedTouches[0].clientX，计算差值diff = endX - startX - 只在
Math.abs(diff) > 50时才触发切换，避免轻微抖动误判 - 加上
e.preventDefault()阻止页面默认滚动，但仅对轮播容器生效，别影响全局
transition 和 transform 的性能陷阱
轮播动画卡顿，90% 出在用了 left、margin-left 或没开启硬件加速。CSS 动画必须走 transform + opacity 这类可合成属性，否则强制触发重排（reflow）。
兼容性注意：老版 Safari 对 will-change: transform 支持不稳定，不如直接加 transform: translateZ(0) 强制 GPU 加速。
- 轮播容器加
transform: translateZ(0)或will-change: transform - 切换时只改
transform: translateX(-${offset}px)，别碰width、left等布局属性 -
transition必须写在.slides上，且只声明transform 0.3s ease-in-out，不要加all - 如果图片尺寸不统一，先用
object-fit: cover统一裁剪，避免 layout 波动
怎么让轮播“无缝循环”而不是闪回第一张
无缝的关键不是靠 CSS 动画循环，而是 DOM 层面复制首尾项：把第一张图插入到最后，最后一张图插入到最前，再配合初始偏移和边界修正。这样无论往左往右切，视觉上都是连贯的。
难点在于索引映射——用户看到的第 1 张，实际 DOM 是第 2 张；点“上一张”到头时，要瞬间跳到倒数第二张（即逻辑上的最后一张），而不是慢慢滑过去。
- 初始化时克隆第一张图追加到末尾，克隆最后一张图插入到开头
- 初始
currentIndex设为1（对应真实第一张），而非0 - 切换到首/尾时，不执行动画，用
classList.add('no-transition')瞬间跳转，再重置索引 - 重置后立即删掉临时 class，恢复正常过渡效果
轮播看着简单，但边界处理、触摸响应、性能优化、无缝逻辑这几块很容易漏掉细节。尤其是移动端滑动+自动轮播+无缝三者叠加时，计时器、touch 状态、DOM 位置必须严格同步，差一点就会出现卡死或错位。
