网页无限轮播左右箭头按钮失效问题求助（基于CodingNepal实现）

云上老周

2026-7-16

问题描述

我正在开发一个网页动画：点击圆形元素后，该元素会切换为用于展示更多信息的无限轮播组件，此轮播参考了YouTube博主CodingNepal的无限轮播实现方案。目前其他功能均正常，但轮播区域的<i>标签左右箭头按钮无法触发滚动，而原博主的代码可正常运行，我无法排查出问题原因，附上对应代码及在线演示，请求技术帮助。

排查方向

事件绑定有效性检查：确认箭头按钮的click事件是否正确绑定。可能是DOM加载完成前就执行了绑定代码，导致元素获取失败；也可能是选择器书写错误。可以在控制台打印目标元素，验证是否成功获取：
```
console.log(document.querySelector('.your-left-arrow-class')); // 替换为你的箭头实际选择器
```
CSS遮挡排查：箭头按钮可能被上层元素遮挡，导致点击事件无法触发。检查按钮的z-index值是否足够高，或父元素是否设置了pointer-events: none属性。可以临时给按钮添加高亮背景色，测试点击区域是否可见且可交互。
DOM结构/样式冲突检查：对比原博主的代码，确认你在实现圆形转轮播的动画时，是否修改了轮播容器的类名、DOM层级，或覆盖了轮播核心逻辑依赖的CSS属性（如transform、transition）。

动态元素事件委托处理：如果箭头按钮是圆形切换为轮播后才动态生成的，需改用事件委托绑定点击事件，而非直接绑定到元素上：

document.addEventListener('click', function(e) {
  if(e.target.matches('.left-arrow')) {
    // 左箭头滚动逻辑
  } else if(e.target.matches('.right-arrow')) {
    // 右箭头滚动逻辑
  }
});

控制台错误排查：打开浏览器开发者工具（F12）的Console面板，查看是否存在JavaScript报错（如变量未定义、函数调用失败等），这类错误会直接导致按钮逻辑无法执行。

补充建议

若上述排查未解决问题，可补充以下信息以便进一步定位：

箭头按钮的HTML结构及对应的CSS样式代码
轮播滚动逻辑的核心JavaScript片段
圆形元素切换为轮播组件的代码实现

内容的提问来源于stack exchange，提问作者Patricio Garcia