实现图片轮播器的悬停暂停功能技术求助

你的轮播器当前悬停后重启计时器是因为直接调用了playSlide，而playSlide里会重置为完整的sliderSpeed计时。要实现暂停后继续剩余时间的效果，需要记录计时器的流逝时间，计算剩余时长，离开时用剩余时长重启计时器。

修改思路 #

• 新增变量记录计时器启动的时间点，以及悬停时的剩余时间
• 鼠标悬停时：清除当前计时器，计算已经过去的时间，得出剩余时间
• 鼠标离开时：用剩余时间启动计时器，而不是重置为完整时长
• 每次切换幻灯片后，重新记录计时器的起始时间

修改后的完整JS代码 #

var timeout;
var timerStartTime; // 记录计时器启动时间
var remainingTime = sliderSpeed; // 剩余计时时长，初始为完整速度

function setDirection(d) {
  document.querySelector('.slider').style.setProperty('--direction', d);
}
setDirection(1);
var slider = document.getElementsByClassName("slider")[0];
var sliderDots = Array.prototype.slice.call(document.getElementsByClassName("dots")[0].children);
var sliderContents = Array.prototype.slice.call(document.getElementsByClassName("elements")[0].children);
var sliderArrowLeft = document.getElementsByClassName("arrow-left")[0];
var sliderArrowRight = document.getElementsByClassName("arrow-right")[0];
var sliderSpeed = 3000,
  currentSlide = 0,
  currentActive = 0,
  sliderTimer = 0;

let elements = document.querySelector('.elements');
elements.addEventListener('mouseover', function() {
  clearTimeout(sliderTimer);
  // 计算已流逝的时间，得出剩余时间
  const elapsed = Date.now() - timerStartTime;
  remainingTime = sliderSpeed - elapsed;
  // 防止剩余时间为负数
  if (remainingTime < 0) remainingTime = 0;
});

elements.addEventListener('mouseout', function() {
  // 用剩余时间启动计时器
  sliderTimer = setTimeout(function() {
    playSlide(currentSlide += 1);
  }, remainingTime);
  // 重新记录计时器启动时间
  timerStartTime = Date.now();
});

function playSlide(slide, d) {
  if (!(d === undefined)) {
    direction = d;
    setDirection(d);

    // Force it forwards after it's done:
    clearTimeout(timeout);
    timeout = setTimeout(function() {
      setDirection(1);
    }, 1000)
  }
  for (var k = 0; k < sliderDots.length; k++) {
    sliderContents[k].classList.remove("active");
    sliderContents[k].classList.remove("inactive");
    sliderDots[k].classList.remove("active");
  }
  if (slide < 0) {
    slide = currentSlide = sliderContents.length - 1;
  }
  if (slide > sliderContents.length - 1) {
    slide = currentSlide = 0;
  }
  if (currentActive != currentSlide) {
    sliderContents[currentActive].classList.add("inactive");
  }
  sliderContents[slide].classList.add("active");
  sliderDots[slide].classList.add("active");
  currentActive = currentSlide;
  clearTimeout(sliderTimer);
  // 每次切换后重置剩余时间为完整时长，并记录启动时间
  remainingTime = sliderSpeed;
  sliderTimer = setTimeout(function() {
    playSlide(currentSlide += 1);
  }, sliderSpeed)
  timerStartTime = Date.now();
}
sliderArrowLeft.addEventListener("click", function() {
  playSlide(currentSlide -= 1, -1);
})
sliderArrowRight.addEventListener("click", function() {
  playSlide(currentSlide += 1, 1);
})
for (var l = 0; l < sliderDots.length; l++) {
  sliderDots[l].addEventListener("click", function() {
    let d = sliderDots.indexOf(this) - currentSlide
    playSlide(currentSlide = sliderDots.indexOf(this), Math.sign(d));
  })
}
playSlide(currentSlide);

关键修改点说明 #

• 变量新增：timerStartTime记录每次计时器启动的时间戳，remainingTime存储悬停时剩余的计时时长
• 鼠标悬停逻辑：清除计时器后，通过当前时间减去启动时间，计算已经过去的时间，进而得到剩余时间
• 鼠标离开逻辑：使用剩余时间启动计时器，而不是调用playSlide重置计时
• 幻灯片切换时：每次切换后，重置remainingTime为完整的sliderSpeed，并重新记录计时器启动时间

HTML和CSS代码无需修改，直接沿用你提供的即可。

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