轮播图按钮能点但不动，主因是索引未更新、active类未切换或事件未绑定；按钮无反应需检查DOM加载时机和选择器；图片不换需同步更新索引与调用显示函数；视觉不变常因active类漏切换；移动端须兼顾touchstart或pointerdown事件。
按钮能点但轮播图不动，基本是索引没更新、active类没切换、或事件根本没绑上——不是代码写得不够“炫”，而是三个关键动作漏掉了一个。
按钮点击没反应：先查 event listener 绑在哪
常见错误是脚本执行时 DOM 还没加载完，document.querySelector('.next-btn') 返回 null，后续的 addEventListener 静默失败。
- 把 JS 放在
</body>前，或用DOMContentLoaded包一层 - 动态插入的轮播图（比如通过
innerHTML添加），必须在插入后绑定事件，不能提前查 - 用浏览器开发者工具的 Elements → Event Listeners 面板，直接看按钮节点上有没有
click监听器；没有就说明选择器写错了，比如写成'.next_btn'但实际 class 是next-btn
点了按钮但图片不换：索引更新和边界处理必须同步做
currentIndex 变了，不代表视图就变——它只是个数字，得靠它驱动 DOM 更新。很多人只写了 currentIndex++，却忘了调用 showSlide(currentIndex)。
- 右键切换推荐用取模实现循环：
currentIndex = (currentIndex + 1) % slides.length - 左键切换别直接
currentIndex--，要防负数：currentIndex = (currentIndex - 1 + slides.length) % slides.length - 如果不想循环（停在首尾），就得用
Math.max(0, currentIndex - 1)和Math.min(slides.length - 1, currentIndex + 1) - 每次更新
currentIndex后，必须立刻执行 DOM 切换逻辑，不能只改变量
图片换了但视觉没变：active 类切换漏步骤
多数轮播图靠 CSS 的 .active 类控制显隐（比如 opacity: 1; z-index: 2;），而不是直接改 style.display。漏掉清除旧类或添加新类，就等于白算。
立即学习“前端免费学习笔记（深入）”；
- 切换前先清空所有：
slides.forEach(s => s.classList.remove('active')) - 再给目标项加类：
slides[currentIndex].classList.add('active') - 避免用
style.display = 'block'控制显隐——它会打断 CSStransition动画 - 检查 CSS 中
.active是否真有生效样式，比如被其他规则覆盖、或缺少!important（不推荐）但实际需要
最易忽略的一点：移动端 click 有 300ms 延迟，且某些 WebView 下完全不触发 touch。光绑 click 不够，得同时监听 touchstart，或者用 pointerdown 兼容更稳。但别在 touchstart 里写 e.preventDefault()——除非你真在做拖拽，否则它会干掉默认点击行为，让按钮彻底失灵。
