轮播图自动播放停不下来是因为setinterval重复调用未清除；箭头无效常因缺少event.preventdefault()或tabindex；切换生硬应改用transform+transition；移动端卡顿需禁用默认滚动并正确处理touch事件。
轮播图自动播放停不下来？检查 setInterval 是否被重复调用
常见现象是点击下一张后，图片切换变快、甚至跳帧，控制台没报错但行为失控。本质是每次手动触发切换（比如点箭头）时，又新建了一个 setInterval，旧的没清除。
- 务必在启动自动播放前，先用
clearInterval(this.timer)清掉已有定时器（假设你把定时器 ID 存在this.timer上） - 不要在事件监听函数里直接写
setInterval(...)，统一抽成startAutoPlay()和stopAutoPlay()两个方法 - 鼠标悬停暂停轮播时，只调用
stopAutoPlay()；移出后重新startAutoPlay()，而不是setTimeout延迟再启——延迟会导致空档或重叠
左右箭头点击无效？确认 event.preventDefault() 和 tabindex 的影响
很多教程用 <a href="#"></a> 做按钮，但没加 event.preventDefault()，一点击页面就跳到顶部；更隐蔽的问题是，如果轮播容器或按钮本身没设 tabindex="0"，键盘用户按 Tab 键根本无法聚焦到箭头，也就无法用空格/回车触发。
- 所有箭头按钮建议用
<button type="button"></button>，天然无跳转、可聚焦、语义正确 - 如果非要用
<a></a>，必须在 click 回调里第一行写event.preventDefault() - 确保箭头元素有
tabindex="0"，且 CSS 中未设置outline: none而未提供替代焦点样式
图片切换生硬？别硬切，用 transform: translateX() 配合 transition
直接改 left 或 margin-left 触发重排，性能差；用 display: none/block 切换则无过渡效果。现代做法是把所有图片横向排成一行，靠移动容器的 transform 来“滑动”。
html-to-pptx-converter
下载
使用 PptxGenJS 和 Python 解析，将结构化的 HTML/CSS 幻灯片内容转换为原生、可编辑的 PowerPoint（.pptx）演示文稿。
- 外层容器设
overflow: hidden，内层图片容器设display: flex，每张图宽 100% 容器宽 - 切换时只更新内层容器的
style.transform = "translateX(-${currentIndex * 100}%)"; - CSS 中加
transition: transform 0.3s ease-in-out;，注意不要写成all 0.3s，避免意外动画
移动端滑动卡顿？禁用默认滚动并监听 touchstart/touchmove
原生 touch 滚动会和轮播手势冲突，尤其在 iOS Safari 上容易触发页面上下滚动，导致轮播“不跟手”。
- 给轮播容器加
touch-action: pan-y;（允许纵向滚动）或touch-action: none;（完全接管） - 在
touchstart里记录起始位置startX，touchmove中计算偏移量，但别立刻更新 UI——等touchend再判断是否滑动足够距离（比如 > 30px）才翻页 - 务必在
touchmove回调开头加event.preventDefault()，否则系统默认行为会干扰
轮播图真正难的不是“能动”，而是动得稳、切得准、响应快、无障碍可用。上面四点覆盖了 90% 的线上故障现场，尤其是定时器残留和 touch 行为拦截，最容易被忽略。
前端入门到VUE实战笔记：立即使用
在学习笔记中，你将探索 前端 的入门与实战技巧！
