滑块到达末尾后反向滑动问题：需改为直接跳转至首张

问题描述 #

当前滑块行为：当滑块到达最后3张图片时，会反向滑动至第一张。
需求：滑块到达最后索引后，直接连续跳转至第一张，而非反向滑动。

原代码 #

let slideIndex = 1;
showSlides(slideIndex);

function nextImg() {
  showSlides(slideIndex += 3);
}

function prevImg() {
  showSlides(slideIndex -= 3);
}

function showSlides(n) {

  let slides = document.getElementsByClassName("img");

  if (n >= slides.length) {
    slideIndex = 1;
  }
  if (n < 1) {
    slideIndex = slides.length - 2;
  }

  for (let slide of slides) {
      slide.style.transform = `translateX(-${100 * (slideIndex - 1)}%)`;
      slide.style.transition = "transform 1s ease-in-out";
    }
}

let intervalId = setInterval(nextImg, 3000);

function revfunc() {
  clearInterval(intervalId);
  intervalId = setInterval(prevImg, 2000);
};

问题原因 #

当滑块从最后一组切换到第一组时，transform的百分比从较大值直接变为0%，浏览器会自动选择最短动画路径，也就是反向滑动回开头，导致出现不符合需求的反向动画。

修改后的代码 #

let slideIndex = 1;
showSlides(slideIndex);

function nextImg() {
  showSlides(slideIndex += 3);
}

function prevImg() {
  showSlides(slideIndex -= 3);
}

function showSlides(n) {
  let slides = document.getElementsByClassName("img");
  let isLoopToStart = false;

  // 处理索引越界逻辑
  if (n >= slides.length) {
    isLoopToStart = true;
    slideIndex = 1;
  } else if (n < 1) {
    slideIndex = slides.length - 2;
  } else {
    slideIndex = n;
  }

  for (let slide of slides) {
    if (isLoopToStart) {
      // 循环到开头时，先取消过渡，瞬间定位到目标位置
      slide.style.transition = "none";
      slide.style.transform = `translateX(-${100 * (slideIndex - 1)}%)`;
      // 强制浏览器重绘，确保样式生效后再恢复过渡
      void slide.offsetWidth;
      slide.style.transition = "transform 1s ease-in-out";
    } else {
      slide.style.transform = `translateX(-${100 * (slideIndex - 1)}%)`;
      slide.style.transition = "transform 1s ease-in-out";
    }
  }
}

let intervalId = setInterval(nextImg, 3000);

function revfunc() {
  clearInterval(intervalId);
  intervalId = setInterval(prevImg, 2000);
};

修改说明 #

• 新增isLoopToStart标记，识别从末尾跳转到开头的场景
• 针对循环跳转场景，先移除过渡动画，让滑块瞬间定位到第一组位置，再强制浏览器重绘后恢复过渡，避免反向滑动的动画
• 补全索引判断的else分支，确保正常滑动时索引逻辑正确

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