原生HTML+CSS+JS可实现稳定顺滑卡片轮播：结构语义化、CSS用transform+overflow控动效、JS严管索引与状态同步；避免left/margin-left触发重排，flex布局动态读宽，overflow:hidden裁剪，transition写死样式中，showSlides(n)直接赋值索引并边界校验，touch事件防默认行为，自动轮播配暂停逻辑，按钮用button[type=button]。
直接用原生 HTML + CSS + JS 就能做出稳定、顺滑的卡片式轮播图，不用 Swiper、不引任何第三方库。关键不是堆功能，而是守住三个锚点：结构语义清晰、CSS 走 transform + overflow 控动效、JS 严管索引与状态同步。
用 transform: translateX() 切换，别碰 left 或 margin-left
改 left 或 margin-left 会强制触发 layout（重排），尤其在低端安卓机上明显卡顿；transform 走 GPU 合成层，动画帧率稳得多。
- 所有卡片必须横向排列：推荐
display: flex容器 +flex-direction: row，每张卡片设固定宽度（含gap） - 位移值严格按
currentIndex * cardWidth计算，别写死300px——用slides[0].getBoundingClientRect().width动态读更安全 - 轮播容器必须设
overflow: hidden，否则滑出部分会露边 - 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 }选项
自动轮播必须配暂停逻辑，setInterval 不能裸跑
只写 setInterval(switchImage, 3000) 很危险：鼠标悬停还在切，点按钮后定时器没清，导致多线程冲突。
- 定义全局变量
let carouselTimer = null，每次启动前先clearInterval(carouselTimer) -
mouseenter时clearInterval，mouseleave时重新setInterval - 手动点击导航按钮后，同样要重置定时器（否则刚切完第2张，0.5秒后又切到第3张）
- 左右箭头按钮必须用
<button type="button">，禁用时支持disabled属性，不会意外跳顶或刷新
最易被忽略的是状态同步时机和移动端 touchstart 的拦截时机——DOM 更新不同步，用户会看到指示点高亮了但图没动；touchstart 没第一时间 preventDefault，整个手势逻辑就废了一半。
