纯html无法实现轮播图，必须依赖css+javascript协同控制显隐、位移或过渡；display:none切换会抖动甚至白屏，因其反复清空重建渲染树，而transform:translatex()仅触发重绘、性能更优。
纯 HTML 无法实现轮播图，必须靠 CSS + JavaScript 协同控制显隐、位移或过渡；只写结构不加逻辑，页面上就是一堆静止图片。
为什么 display: none 切换会抖动甚至白屏
根本原因是 DOM 渲染树被反复清空重建：每次设 display: none，浏览器就丢弃该元素的 layout 和 paint 结果；切回来时要重新加载图片、计算尺寸、重排布局。尤其当图片宽高不一致或容器没设固定 height，页面就会跳动。
- 用
opacity: 0+visibility: hidden替代，保留占位和渲染状态 - 更优解是
transform: translateX()移动整个容器，只触发 repaint，不触发 reflow - 所有图片必须提前加载：
new Image().src = url或在<img>上加loading="eager" - 容器必须设
overflow: hidden，否则位移后图片会溢出
setInterval 自动轮播为什么总“失控”
不是定时器不准，而是没人管它的生命周期。标签页切走后它还在跑，用户点按钮没清旧定时器，结果多个 setInterval 并发执行，图片乱跳。
- 全局只维护一个变量：
let carouselTimer = null - 每次启动前必须先
clearInterval(carouselTimer) - 鼠标悬停时
clearInterval，移出时用保存的间隔值重新setInterval - 更稳妥的做法是改用
setTimeout链式调用：切完立刻设下一次，天然可中断
移动端滑动为什么没反应或误判方向
PC 的 mousemove 在手机上根本不会触发；而 iOS Safari 默认把横向 touchmove 当作页面滚动处理，直接吞掉你的事件。
- 轮播容器必须加
touch-action: pan-y（允许竖向滚动）或touch-action: none（完全接管） - 监听
touchstart/touchmove/touchend，不是mousedown等 PC 事件 -
touchmove中必须调用e.preventDefault()，否则手势被浏览器截断 - 判断滑动方向不能只看
clientX差值——要过滤掉Math.abs(deltaY) > 30的斜向操作
无障碍访问常被忽略的硬性要求
不加 ARIA 标注的轮播图对屏幕阅读器用户等于不存在。很多团队做完功能就上线，结果视障用户连“这是个轮播”都不知道。
- 外层容器必须设
role="region"+ 具体aria-label（如aria-label="首页 Banner 轮播"） - 每张图的外层需设
aria-live="polite" aria-atomic="true" aria-relevant="additions text" - 左右按钮必须带
aria-controls="carousel-content-id"和明确aria-label（如"切换至下一张活动海报"） - 禁用状态要同时写
disabled属性和aria-disabled="true"，缺一不可
真正的难点不在“怎么动起来”，而在“什么时候不该动”：页面不可见、图片未加载、手势被截断、焦点未同步……这些边界条件比动画本身更消耗调试时间。
前端入门到VUE实战笔记：立即使用
在学习笔记中，你将探索 前端 的入门与实战技巧！
