轮播图next与previous按钮点击功能一致故障排查问询

问题根因 #

• 按钮触发逻辑完全写反：当前代码中将next按钮的交互逻辑写为上一张切换逻辑，非next按钮（即previous按钮）的逻辑反而写为下一张切换逻辑，导致两个按钮功能表现混乱。
• 位移数值不统一：切换下一张时用的偏移量是683px，切换上一张时用的偏移量是650px，数值不匹配会导致轮播偏移错位，后续出现图片显示不全的问题。

修复后代码 #

const images = document.querySelector('.carousel_images');
const buttons = document.querySelectorAll('.carousel_button');

const imageCount = document.querySelectorAll('.carousel_images img').length;
let imageIndex = 1;
let translateX = 0;
// 统一轮播单图偏移宽度，可根据实际图片宽度调整
const SLIDE_WIDTH = 683;

buttons.forEach(button => {
  button.addEventListener('click', e => {
    if (e.target.id === 'next') {
      // next按钮逻辑：切换到下一张，索引递增，整体左移
      if (imageIndex !== imageCount) {
        imageIndex++;
        translateX -= SLIDE_WIDTH;
      }
    } else {
      // previous按钮逻辑：切换到上一张，索引递减，整体右移
      if (imageIndex !== 1) {
        imageIndex--;
        translateX += SLIDE_WIDTH;
      }
    }
    
    images.style.transform = `translateX(${translateX}px)`;
  });
});

修复说明 #

1. 交换了next和previous按钮的原有逻辑，让两个按钮执行对应操作
2. 提取统一的单张轮播图偏移宽度常量SLIDE_WIDTH，避免不同逻辑里数值不一致导致的位移偏差，后续需要调整轮播宽度时只需要修改这一处即可。

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