为点击切换的Carousel添加自动间隔轮播功能遇阻求助

要给现有手动切换的轮播添加自动轮播功能，只需在原JS代码中补充定时器逻辑，并处理手动交互时的冲突问题，具体实现如下：

核心修改点 #

• 新增定时器变量，用于控制自动轮播的启停
• 复用现有手动切换逻辑，定时触发"Next"按钮的切换行为
• 用户手动点击按钮时重置定时器，避免自动轮播与手动操作冲突
• 可选：添加鼠标悬停暂停功能，提升用户体验

修改后的完整JS代码 #

$(function() {
  $('.carousel-item').eq(0).addClass('active');
  var total = $('.carousel-item').length;
  var current = 0;
  let carouselInterval; // 存储定时器ID，用于后续控制

  // 自动轮播逻辑：直接触发Next按钮的点击事件，复用现有切换代码
  function autoSlide() {
    $('#moveRight').click();
  }

  // 初始化自动轮播，3秒切换一次（可根据需求调整间隔）
  carouselInterval = setInterval(autoSlide, 3000);

  $('#moveRight').on('click', function() {
    // 重置定时器：清除现有定时器，重新启动，避免手动操作后自动轮播混乱
    clearInterval(carouselInterval);
    carouselInterval = setInterval(autoSlide, 3000);

    var next = current;
    current = current + 1;
    setSlide(next, current);
  });
  
  $('#moveLeft').on('click', function() {
    // 重置定时器
    clearInterval(carouselInterval);
    carouselInterval = setInterval(autoSlide, 3000);

    var prev = current;
    current = current - 1;
    setSlide(prev, current);
  });

  // 可选优化：鼠标悬停轮播区域时暂停自动播放，离开后恢复
  $('.carousel-item').parent().on('mouseenter', function() {
    clearInterval(carouselInterval);
  }).on('mouseleave', function() {
    carouselInterval = setInterval(autoSlide, 3000);
  });

  function setSlide(prev, next) {
    var slide = current;
    
    if (next > total - 1) {
      slide = 0;
      current = 0;
    }
    
    if (next < 0) {
      slide = total - 1;
      current = total - 1;
    }

    $('.carousel-item').eq(prev).removeClass('active');
    $('.carousel-item').eq(slide).addClass('active');

    console.log('current ' + current);
    console.log('prev ' + prev);
  }
});

补充说明 #

• 定时器间隔3000代表3秒，可根据需求修改为其他数值（比如5000即5秒）
• 若不需要鼠标悬停暂停功能，直接删除对应的mouseenter和mouseleave事件代码即可
• CSS和HTML部分无需修改，保持原代码结构不变

内容的提问来源于stack exchange，提问作者mr.Hritik