轮播图应避免display切换导致卡顿，改用opacity+visibility组合；用transform:translateX实现滑动需确保尺寸对齐、单位统一、父容器overflow:hidden；自动播放需统一管理定时器；触摸拖拽要设阈值、速度判定和touch-action；还需适配无障碍与系统动画设置。
纯手写 HTML + CSS + JavaScript 轮播图，不依赖任何库，能跑通、能维护、能过审——关键不在“炫技”，而在三点：结构清晰、状态可控、事件不漏。
用 display: none 切换图片时为什么卡顿或闪白？
这是初学者最常踩的坑：直接对 .slide 元素反复设 display: block/none，浏览器会触发重排（reflow）+ 重绘（repaint），尤其在图片未预加载或 DOM 节点多时明显卡顿。
- 改用
opacity: 0/1+visibility: hidden/visible组合，避免重排，只触发布局无关的重绘 - 务必加
transition: opacity 0.4s ease，否则动画会生硬或丢失 - 所有
.slide必须初始设为position: absolute; top: 0; left: 0;，否则 opacity 变化时可能错位 - 不要在
setInterval里直接操作 DOM，先用变量缓存当前索引，再批量更新
transform: translateX() 实现滑动时图片错位或溢出怎么办？
用 flex 容器 + translateX 是更现代的做法，但错位往往源于尺寸没对齐或 transform 基准偏移。
-
.slides的总宽度必须是单张图宽 × 图片数（如width: 300%对应 3 张图），不能靠flex-wrap或内容撑开 - 每张
.slide必须设flex-shrink: 0，否则缩放时会被压缩变形 - translateX 的值单位必须统一用
%或px，混用会导致计算偏差；推荐用calc(-${index} * 100%) - 容器父级需设
overflow: hidden，且自身不能有 padding/border 影响尺寸计算
自动播放被用户交互打断后如何恢复？
悬停暂停、点击切换、键盘导航等行为若没清理定时器，会导致多个 setInterval 并行运行，最终轮播失控。
立即学习“前端免费学习笔记（深入）”；
- 声明一个全局变量
let slideTimer = null，每次启动前先clearInterval(slideTimer) - 在
mouseenter时清除定时器，在mouseleave时重新启动（带防抖，避免频繁启停） - 左右按钮点击后，除了切换图片，也要重置定时器：先清空，再
setTimeout(() => startAutoPlay(), 3000) - 别忘了监听
blur/visibilitychange事件：页面切到后台时暂停，切回时恢复
轮播图在移动端触摸拖拽失效或响应迟钝
原生 JS 实现触摸支持不是加个 touchstart 就完事，核心在于位移阈值、速度判定和防误触。
- 记录
touchstart的clientX，在touchend时对比差值，绝对值< 30视为误触，不执行切换 - 用
touchmove实时更新transform: translateX()模拟拖拽感，但不要在此刻切换图片 - 在
touchend后计算滑动速度（位移 ÷ 时间），> 0.3px/ms 才触发惯性翻页，否则回弹 - 务必加
touch-action: pan-y到轮播容器，防止 iOS Safari 默认拦截横向 touch 事件
轮播图真正的复杂点从来不在“怎么动起来”，而在于“什么时候不该动”——比如表单聚焦时、屏幕阅读器朗读中、系统减少动画开启时。这些边界条件一旦忽略，轻则体验割裂，重则被无障碍审查打回。
