轮播按钮点击无效主因是DOM未加载完就执行JS，应将script移至/body前或用DOMContentLoaded包裹；currentIdx越界需用模运算修正；按钮disabled状态须同步更新；移动端需兼容touch事件并防重复触发。
轮播按钮点击后图片不切换，addEventListener 没生效？
常见原因是按钮元素在 JS 执行时还未加载进 DOM。直接写 document.querySelector('.next-btn').addEventListener(...) 但脚本放在 <head> 里，此时按钮节点还不存在。
解决方法只有两个：
— 把 <script> 标签移到 </body> 前
— 或用 DOMContentLoaded 包裹初始化逻辑
别用 window.onload，它等所有资源（包括图片）加载完才触发，轮播按钮可能卡顿半秒以上才可点。
currentIdx 越界导致轮播崩溃或白屏
左右切换时若没做索引边界检查，currentIdx 可能变成 -1 或超过图片数组长度，接着 images[currentIdx] 返回 undefined，img.src 赋值失败，控制台报 Cannot set property 'src' of undefined。
立即学习“前端免费学习笔记（深入）”；
必须显式限制范围：
function goToNext() {
currentIdx = (currentIdx + 1) % images.length;
}
function goToPrev() {
currentIdx = (currentIdx - 1 + images.length) % images.length;
}注意：用 (currentIdx - 1 + images.length) % images.length 而不是 (currentIdx - 1) % images.length，否则负数取模在 JS 中结果为负（如 -1 % 4 === -1），仍会越界。
按钮 disabled 状态没同步更新，用户狂点导致状态错乱
纯循环轮播（无限滚动）可以不 disable 按钮；但如果你做了「首尾禁用」逻辑（比如第一张时 prev 按钮灰色不可点），就必须在每次切换后立刻更新按钮的 disabled 属性。
常见疏漏点：
- 只改了图片，忘了改
prevBtn.disabled = currentIdx === 0 - 用
className切换样式但没同步disabled属性，按钮视觉禁用但实际仍可点击 - 多个轮播组件共用同一套 JS 时，事件监听器没绑定到对应实例的按钮上，状态互相污染
移动端 touch 事件没兼容，左右滑失效
仅靠 click 事件在手机上体验极差：click 有约 300ms 延迟，且无法响应滑动手势。必须补上 touchstart/touchend，记录起始/结束坐标，判断水平位移方向。
关键逻辑精简版：
let startX = 0;
carousel.addEventListener('touchstart', e => {
startX = e.touches[0].clientX;
});
carousel.addEventListener('touchend', e => {
const endX = e.changedTouches[0].clientX;
if (endX - startX > 50) goToPrev(); // 右滑 → 上一张
if (startX - endX > 50) goToNext(); // 左滑 → 下一张
});阈值设为 50px 是经验值，太小易误触，太大难触发；别忘了在 PC 上保留 click，在移动端优先响应 touch，避免重复触发。
真正麻烦的是 touch 和 click 在部分安卓浏览器里会连续触发两次——得加个 isTouching 标志位临时屏蔽 click。
