JavaScript图片滑块点击按钮无切换问题排查及调整方法

核心问题：立即执行函数未触发 #

你的JavaScript代码中，立即执行函数仅完成定义但未执行，导致事件绑定等核心逻辑完全没有运行。只需在函数末尾添加()，就能让代码在页面加载时自动执行。

修正后的完整JavaScript代码 #

(function() {
  const pictures = [
    "i1",
    "i2",
    "i3",
    "i4",
    "i5",
    "i6",
    "i7"
  ];

  let buttons = document.querySelectorAll(".btn");
  let imgDiv = document.querySelector(".img-container");
  let counter = 0;

  buttons.forEach(function(button) {
    button.addEventListener("click", function(e) {
      // 阻止a标签默认跳转行为，避免页面刷新打断逻辑
      e.preventDefault();
      
      if (button.classList.contains('btn-left')) {
        counter--;
        if (counter < 0) {
          counter = pictures.length - 1;
        }
        // 单独修改背景图，保留初始的背景定位、缩放等样式
        imgDiv.style.backgroundImage = `url('/new_assets/images/${pictures[counter]}.jpg')`;
      }

      if (button.classList.contains('btn-right')) {
        counter++;
        if (counter > pictures.length - 1) {
          counter = 0;
        }
        imgDiv.style.backgroundImage = `url('/new_assets/images/${pictures[counter]}.jpg')`;
      }
    })
  })
})(); // 新增()执行立即函数

关键优化说明 #

1. 阻止a标签默认行为：点击<a>标签会触发页面跳转（即使未设置href），添加e.preventDefault()可避免页面刷新导致滑块逻辑失效。
2. 保留背景样式：原代码直接修改background属性会覆盖初始的center/cover fixed no-repeat样式，改用backgroundImage单独修改图片路径，确保显示效果和初始状态一致。

额外排查方向 #

• 验证图片路径：在浏览器控制台的网络面板查看图片请求，若出现404错误，说明图片路径配置有误，需核对/new_assets/images/下的文件是否存在。
• 确认DOM加载顺序：当前HTML中JS放在DOM元素之后的写法是正确的，若后续调整JS位置到<head>中，需包裹DOMContentLoaded事件确保元素加载完成后再执行代码。

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