原生html卡片轮播稳态方案：结构语义化、css用transform+overflow:hidden+flex布局与transition动效、js精准控索引与状态，兼顾自动轮播、手动切换、手势滑动及边界容错。
原生 HTML 卡片轮播，不靠 Swiper、不引第三方，核心就三点：结构语义清晰、CSS 控制布局与动效、JS 管状态与交互。硬套 transform + setInterval 容易卡顿或索引错乱，真正稳的方案得兼顾自动轮播、手动切换、移动端手势和边界容错。
用 transform: translateX() 切换卡片，别碰 left 或 margin-left
改 left 或 margin-left 会触发 layout（重排），尤其在低端安卓机上明显掉帧；transform 走合成层，GPU 加速，顺滑得多。
- 轮播容器必须设
overflow: hidden，否则滑出部分会露边 - 所有卡片横向排列：用
display: flex或white-space: nowrap+display: inline-block - 每张卡片宽度要一致（含
gap），位移值严格按currentIndex * cardWidth计算，别写死300px—— 建议用getBoundingClientRect().width动态读 - CSS 过渡写死在样式里：
transition: transform 0.3s ease-in-out，别用 JS 改style.transition，Safari 可能不生效
showSlides(n) 必须重置索引，不是累加
常见翻车点：每次点击「下一张」都执行 slideIndex += 1，结果快速连点两下，slideIndex 变成 3，但实际只有 3 张图，再切一次就超界；更糟的是，从最后一张点「上一张」，slideIndex -= 1 后变成 0，数组越界直接报错。
- 正确做法是把
showSlides(n)的参数n当作目标索引直接赋值：slideIndex = n - 边界处理放函数末尾：
if (slideIndex > slides.length) slideIndex = 1，if (slideIndex - DOM 更新必须同步：改完
slideIndex，立刻更新transform值、高亮对应指示点、设置当前卡片为active类，三者不能拆开异步执行
移动端手势滑动要防默认行为，且只在 touchstart 阶段阻止
只监听 touchmove 并调 preventDefault() 是无效的——iOS Safari 在 touchstart 阶段已决定是否接管滚动，等你到 touchmove 才拦，页面早开始上下拖了。
- 在
touchstart回调第一行就写e.preventDefault()，不加任何条件判断 - 用
e.touches[0].clientX记起点，touchmove中算水平位移差，只在Math.abs(dx) > Math.abs(dy)时才处理滑动逻辑 -
touchend后做吸附：若偏移量绝对值 > 卡片宽度 × 0.3，才切到下一张；否则用scrollTo或scrollBy回弹 - Android WebView 和 iOS 15+ 对
preventDefault更敏感，建议加上{ passive: false }选项绑定事件
自动轮播和手动操作共存的关键是「暂停开关 + 重启定时器」
只清定时器不恢复，用户移开鼠标后轮播就停了；只恢复不控制时机，手动切完立刻被自动逻辑覆盖，出现“闪回”。
- 用布尔变量
isPaused标记状态，悬停mouseenter设为true，移出mouseleave设为false - 定时器启动逻辑封装成函数：
startTimer()内部先clearInterval，再setInterval，并检查!isPaused - 左右箭头、指示点点击、手势滑动结束，都要设
isPaused = true，避免刚手动切完就被自动轮播打断 - 记得在页面卸载前（
window.onunload）或组件销毁时clearInterval，否则后台可能残留多个定时器
最易被忽略的其实是图片加载失败导致的塌陷——某张图 404，img 高度为 0，整个轮播容器缩成一条线。HTML 层加默认尺寸和占位比 JS 监听 onerror 更快更稳。
前端入门到VUE实战笔记：立即使用
在学习笔记中，你将探索 前端 的入门与实战技巧！
