点击幻灯片上一页/下一页按钮时重置自动轮播计时器

现有图片幻灯片每5秒自动执行切换，但点击「上一页」/「下一页」按钮时，自动切换的倒计时会延续之前的进度，无法从零开始。需要实现点击按钮后，自动切换的倒计时重新从5秒启动。

原代码使用setInterval实现自动切换，这个定时器一旦启动就会按固定间隔重复执行，无法直接重置计时。我们可以改用setTimeout配合定时器清除逻辑，实现点击后的倒计时重置。

修改后的完整代码：

$(document).ready(function(){
  var $prev = $('.previousx');
  var $next = $('.nextx');
  var mode = "auto";
  var autoSlideTimer;

  // 封装自动切换定时器逻辑，每次调用都会重置倒计时
  function startAutoSlide() {
    clearTimeout(autoSlideTimer);
    if (mode === "auto") {
      autoSlideTimer = setTimeout(function(){
        showNextImage();
        startAutoSlide();
      }, 5000);
    }
  }

  $prev.on('click', function(e){
    e.preventDefault();
    mode = "auto";
    showPreviousImage();
    startAutoSlide();
  });

  $next.on('click', function(e){
    e.preventDefault();
    mode = "auto";
    showNextImage();
    startAutoSlide();
  });
  
  // 初始化启动自动切换
  startAutoSlide();
  
  function showNextImage(){
      var $actEl = $('.activx');
      var $nextEl = $actEl.next('.slidex');
      if($nextEl.length){
        $actEl.removeClass('activx');
        $nextEl.addClass('activx');
      }else{
        $actEl.removeClass('activx');
        $('.slidex:first-child').addClass('activx');
      }
  }
  
  function showPreviousImage(){
      var $actEl = $('.activx');
      var $prevEl = $actEl.prev('.slidex');
      if($prevEl.length){
        $actEl.removeClass('activx');
        $prevEl.addClass('activx');
      }else{
        $actEl.removeClass('activx');
        $('.slidex.last').addClass('activx');
      }
  }
});

关键改动说明 #

• 新增autoSlideTimer变量，用于存储定时器ID，方便后续清除旧定时器
• 封装startAutoSlide函数：每次执行先清除之前的定时器，再创建新的5秒定时器；自动切换完成后递归调用自身，保持循环自动切换的逻辑
• 点击「上一页」「下一页」按钮时，在完成图片切换后调用startAutoSlide()，直接重置倒计时
• 页面加载完成后调用startAutoSlide()，初始化自动切换逻辑

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