轮播图应避免 setInterval，改用 requestAnimationFrame + visibilityState 或 setTimeout 实现精准切换；预加载图片并用 opacity/transform 替代 display:none；iOS 需设 touch-action 防手势冲突。

轮播图用 setInterval 自动切换，但页面切到后台就失控

浏览器标签页切走后，setInterval 依然在跑，等切回来可能连播几帧、定时器错乱、甚至触发多次回调。这不是 bug，是标准行为。

• 改用 requestAnimationFrame + 时间戳判断是否“该切了”，它会随页面可见性自动暂停
• 监听 document.visibilityState，在 visibilitychange 事件里手动暂停/恢复定时逻辑
• 更简单稳妥的做法：用 setTimeout 替代 setInterval，每次切完再设下一次——这样能自然中断链式调用

图片切换时闪一下，或出现白屏空隙

本质是 DOM 更新和图片加载不同步。常见于直接换 src 或用 display: none 切换元素。

• 所有图片提前加载：用 new Image().src = url 预加载，或把 loading="eager" 加到 <img alt="轮播图怎么制作html_html轮播图代码实现【详解】" > 标签
• 切换时用 CSS opacity + transition，配合 visibility: hidden 控制占位，避免重排
• 别用 display: none 隐藏待显示项——它会清空渲染树，图片得重新 layout + paint

用 transform: translateX() 做滑动，但手指拖拽卡顿

纯 CSS 过渡在拖拽场景下不响应实时位移，必须靠 JS 控制样式。但频繁写内联 style.transform 会强制同步布局（Layout Thrashing）。

anything-to-html

将调研报告、方案对比、数据分析、需求梳理、会议纪要、设计说明、代码评审、学习笔记等任务产物输出为可在浏览器直接打开的单文件 HTML，替代 Markdown 作为最终交付物。Markdown 在信息密度、视觉清晰度和可分享性上已跟不上 AI 产物的丰富度，HTML 能同时承载排版、表格、SVG 等。

下载

• 只在 touchmove/mousemove 里更新一个状态变量（如 offsetX），不操作 DOM
• 用 requestAnimationFrame 统一在下一帧读取状态、批量更新 transform
• 加 will-change: transform 提前告诉浏览器这个元素要动，触发 GPU 加速（但别滥用，每个元素都加反而拖慢）

轮播图在 iOS Safari 上手势冲突、无法滑动

iOS Safari 默认把横向 touchmove 当作页面滚动处理，会吞掉你的拖拽事件。

立即学习“前端免费学习笔记（深入）”；

• 给轮播容器加 touch-action: pan-y，明确禁止横向滚动，保留竖向滚动（比如轮播图里有长文案需上下滑）
• 如果完全不需要页面滚动，用 touch-action: none，但务必自己实现回弹/边界限制，否则体验生硬
• 别忘了在 touchstart 里调用 event.preventDefault() —— 仅当你要接管整个手势时才用，否则可能影响可访问性

轮播图真正的难点不在“怎么动起来”，而在“什么时候不该动”——页面不可见、手势被截断、图片没加载完、用户正按着不动……这些边界情况比动画本身更消耗调试时间。