如何为带左右按钮的JS Slider实现4-5秒自动轮播并优化滑动流畅度

功能修改说明 #

• 新增4.5秒间隔自动轮播逻辑，手动切换后会自动重置计时避免交互冲突
• 替换原display切换逻辑为CSS过渡动画，实现流畅滑动/淡入效果

1. JS代码修改（完整可直接替换原有代码） #

var slideIndex = 1;
var slideTimer; // 存储自动轮播定时器
showSlides(slideIndex);
autoPlay(); // 初始化自动轮播

// 手动切换下一张/上一张
function plusSlides(n) {
  showSlides(slideIndex += n);
}

// 点击指示点切换到指定slide
function currentSlide(n) {
  showSlides(slideIndex = n);
}

function showSlides(n) {
  var i;
  var slides = document.getElementsByClassName("mySlides");
  var dots = document.getElementsByClassName("dot");
  if (n > slides.length) {slideIndex = 1}    
  if (n < 1) {slideIndex = slides.length}
  // 移除所有slide的激活状态
  for (i = 0; i < slides.length; i++) {
      slides[i].classList.remove("active");
  }
  // 移除所有指示点的激活状态
  for (i = 0; i < dots.length; i++) {
      dots[i].className = dots[i].className.replace(" active", "");
  }
  // 给当前slide和对应指示点加激活状态
  slides[slideIndex-1].classList.add("active");  
  dots[slideIndex-1].className += " active";

  // 每次切换后重置自动轮播定时器，避免手动切换后马上跳转
  clearInterval(slideTimer);
  autoPlay();
}

// 自动轮播逻辑，间隔4500ms即4.5秒切换，可自行调整数值
function autoPlay() {
  slideTimer = setInterval(() => {
    plusSlides(1);
  }, 4500)
}

2. 新增CSS样式（实现流畅动画） #

/* 轮播外层容器必须添加的基础样式 */
.slider-container {
  position: relative;
  overflow: hidden;
  width: 100%;
  /* 按需修改为你的轮播所需高度 */
  height: 400px;
}

.mySlides {
  position: absolute;
  top: 0;
  left: 0;
  width: 100%;
  height: 100%;
  opacity: 0;
  visibility: hidden;
  /* 要横向滑动效果保留下面这行，要淡入淡出效果直接删除即可 */
  transform: translateX(100%);
  /* 过渡时长可自行调整，0.5s对应500毫秒 */
  transition: all 0.5s ease;
}

/* 激活状态的slide正常显示 */
.mySlides.active {
  opacity: 1;
  visibility: visible;
  transform: translateX(0);
}

使用说明 #

• 确保你的轮播外层容器添加了slider-container类名
• 不需要滑动效果仅需要淡入淡出的话，删除CSS中所有transform相关属性即可

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