轮播图需结合页面可见性控制定时器、预加载图片并校验加载状态、用CSS transition和整数transform位移防卡顿模糊；自动播放30行JS足矣，复杂交互应选Swiper。
轮播图用 setInterval 自动切换，但页面切到后台就失控
浏览器标签页切走后，setinterval 默认还在跑，等切回来可能连播 5 轮、定时器堆叠、图片跳帧。这不是代码写错了，是没监听页面可见性。
- 用
document.hidden+visibilitychange事件暂停/恢复轮播 - 别只靠
clearInterval，每次启动前先存 ID，避免重复启动多个定时器 - 切换动画用 CSS
transition，别用 JS 慢速修改left或transform，否则卡顿明显
图片切换时闪一下，或出现白屏间隙
本质是新图片还没加载完，旧图就被移走。不是 HTML 结构问题，是资源加载时机没兜住。
- 所有
<img alt="轮播图html代码怎么写_html轮播图代码编写【特效】" >加loading="lazy"不行——轮播图需要预加载，得手动用new Image().src = url提前触发加载 - 切换前检查
img.complete和img.naturalWidth > 0，否则 fallback 到淡入动画或占位图 - 不要把
<img alt="轮播图html代码怎么写_html轮播图代码编写【特效】" >直接塞进轮播容器再display: none，用opacity: 0+pointer-events: none更稳妥
用 swiper 还是手写？关键看要不要 touch 拖拽和 loop
纯自动播放+点击切换，30 行原生 JS 就够；一旦要支持手指滑动、回弹、loop 无限滚动，立刻上 swiper —— 手写兼容 Android/iOS touch 事件的边界判断太容易漏 case。
-
swiper的loop: true会复制首尾项，DOM 节点数翻倍，如果图片多且带懒加载，记得配preloadImages: false - 不用
swiper时，touchstart/touchmove必须加event.preventDefault()，否则 iOS 会触发页面滚动 - 移动端 click 有 300ms 延迟，轮播点选区必须加
cursor: pointer+touch-action: manipulation
transform: translateX() 切换时边缘模糊、文字发虚
CSS 硬件加速没开全，或者用了非整数像素位移。不是图片分辨率低，是渲染层没对齐。
- 给轮播容器加
will-change: transform，但别滥用——只在切换瞬间加 class 触发，切完立刻移除 - 确保
translateX值是整数，比如translateX(-320px)，别写成-320.5px（JS 计算时用Math.round） - 如果父容器有
scale(0.99)或其他缩放，会导致子元素 subpixel 渲染，直接去掉或改用transform: scale(1)重置
