如何解决点击事件重复绑定导致图片滑块多次滑动的问题

每次打开图片滑块时，你都给rightarrow和leftarrow重复绑定了点击事件。第一次打开绑定1次，点击箭头触发1次；关闭再打开又绑定1次，此时箭头有2个点击事件，点击一次就会执行2次逻辑，导致一次滑2张，以此类推。

把箭头的点击事件绑定逻辑移到图标点击事件的外部，只初始化绑定一次，避免重复绑定。同时调整逻辑，让事件处理函数能正确访问当前的picdiv和滑块状态。

let currentpic = 1;
let activePicDiv = null; // 保存当前的图片容器

// 仅绑定一次箭头点击事件
rightarrow.addEventListener("click", () => {
  if (!activePicDiv) return;
  picarray[currentpic - 1].classList.remove("active");
  currentpic++;
  picarray[currentpic - 1].classList.add("active");
  activePicDiv.appendChild(picarray[currentpic - 1]);
  
  // 更新箭头状态
  rightarrow.classList.toggle("stopping", currentpic === 8);
  leftarrow.classList.remove("stopping");
});

leftarrow.addEventListener("click", () => {
  if (!activePicDiv) return;
  picarray[currentpic - 1].classList.remove("active");
  currentpic--;
  picarray[currentpic - 1].classList.add("active");
  activePicDiv.appendChild(picarray[currentpic - 1]);
  
  // 更新箭头状态
  leftarrow.classList.toggle("stopping", currentpic === 1);
  rightarrow.classList.remove("stopping");
});

allzoomicons.forEach((icon, index) => {
  icon.onclick = function() {
    mainContainer.classList.add("overlay");
    rightarrow.style.display = "block";
    leftarrow.style.display = "block";
    
    activePicDiv = document.createElement("div");
    activePicDiv.className = "picdiv";
    document.body.insertAdjacentElement('afterbegin', activePicDiv);
    
    closeicondiv.style.display = "block";
    activePicDiv.appendChild(closeicondiv);
    
    // 重置初始状态
    currentpic = 1;
    picarray.forEach(arr => arr.classList.remove("active"));
    picarray[currentpic - 1].classList.add("active");
    activePicDiv.appendChild(picarray[currentpic - 1]);
    
    rightarrow.classList.remove("stopping");
    leftarrow.classList.add("stopping");
  }
});

// 关闭按钮逻辑单独绑定
closeicondiv.onclick = function() {
  if (!activePicDiv) return;
  activePicDiv.remove();
  activePicDiv = null;
  
  rightarrow.style.display = "none";
  leftarrow.style.display = "none";
  mainContainer.classList.remove("overlay");
  
  currentpic = 1;
  picarray.forEach(arr => arr.classList.remove("active"));
}

• 用toggle方法简化类名的添加/移除逻辑，代码更简洁
• 用activePicDiv变量保存当前容器，避免事件处理函数依赖局部变量
• 关闭滑块时清空容器引用，防止内存泄漏
• 打开滑块时统一重置图片和箭头状态，避免残留之前的状态

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