JS图片滑块正向滑动正常但反向失效，求问题排查与修复方案

你的左侧按钮逻辑存在两处核心错误：

1. 条件判断slideno > 3完全不符合实际逻辑——你的slideno取值范围始终是1-3，这个条件永远不会触发，导致所有左侧点击都进入错误的else分支。
2. else分支的位移计算错误：固定写死translateX(785px)会让滑块向右偏移出容器，而非回到上一张的正确位置；同时slideno--的执行时机颠倒，导致位移与当前页码不匹配。

修复后的完整代码 #

const N = document.querySelector('.right')  
const P = document.querySelector('.left')
const slider = document.querySelector('.slider')

// 提取滑块宽度为变量，方便后期维护
const slideWidth = 785
let slideno = 1

// 右侧按钮逻辑（保留原正确逻辑）
N.addEventListener('click', () => {
  if (slideno < 3) {
    slider.style.transform = `translateX(-${slideno * slideWidth}px)`
    slideno += 1
  } else {
    slider.style.transform = `translateX(0px)`
    slideno = 1
  }
})

// 修复后的左侧按钮逻辑
P.addEventListener('click', () => {
  if (slideno > 1) {
    slideno -= 1
    slider.style.transform = `translateX(-${(slideno - 1) * slideWidth}px)`
  } else {
    slideno = 3
    slider.style.transform = `translateX(-${(slideno - 1) * slideWidth}px)`
  }
})

修复逻辑说明 #

• 当slideno > 1时：当前显示的不是第一张，点击左侧按钮先将页码减1，再计算对应位移（第n张的位移公式为-(n-1)*slideWidth）。
• 当slideno === 1时：当前显示的是第一张，点击左侧按钮直接跳转到最后一张（第3张），将页码设为3，位移设为-2*slideWidth（对应第3张的位置）。

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