如何为自动轮播图（Automatic Slider）添加CSS过渡（transition）效果

现存问题 #

• 直接修改<img>的src属性无法触发CSS过渡，过渡仅对元素自身可量化的属性（如opacity、transform等）的数值变化生效，替换图片资源不属于这类可过渡的变化
• 事件绑定写法错误：onload(changeImg())会立即执行changeImg函数，而非页面加载完成后执行
• setTimeout传参写法不规范，传递字符串可能引发作用域问题，推荐直接传入函数引用

淡入淡出效果实现 #

修改后代码 #

HTML

<section id="slider">
  <img name="slide" width="400" height="200" />
</section>

CSS

#slider {
  width: 100vw;
  height: 60vh;
  overflow: hidden;
}
#slider img {
  width: 100%;
  height: 100%;
  opacity: 1;
  transition: opacity 1s ease-out;
}
#slider img.fade {
  opacity: 0;
}

JS

let images = ["images/a.jpg", "images/b.jpg", "images/c.jpg", "images/d.jpg"];
let i = 0;
const sliderImg = document.querySelector("#slider img");

function changeImg() {
  // 先触发淡出
  sliderImg.classList.add('fade');
  // 等待淡出动画结束后替换图片，再触发淡入
  setTimeout(() => {
    sliderImg.src = images[i];
    sliderImg.classList.remove('fade');
    i = (i < images.length - 1) ? i + 1 : 0;
  }, 1000); // 时长和CSS的transition时长保持一致
}

window.onload = () => {
  changeImg();
  setInterval(changeImg, 3000); // 轮播间隔=动画时长+停留展示时长，可自行调整
}

向左滑动效果实现 #

修改后代码 #

HTML

<section id="slider">
  <div class="slider-track">
    <img src="images/a.jpg" width="400" height="200" />
    <img src="images/b.jpg" width="400" height="200" />
    <img src="images/c.jpg" width="400" height="200" />
    <img src="images/d.jpg" width="400" height="200" />
  </div>
</section>

CSS

#slider {
  width: 100vw;
  height: 60vh;
  overflow: hidden;
}
.slider-track {
  display: flex;
  width: 400vw; /* 数值为图片数量*100vw */
  height: 100%;
  transition: transform 1s ease-out;
}
.slider-track img {
  width: 100vw;
  height: 100%;
  object-fit: cover;
}

JS

const track = document.querySelector('.slider-track');
const imgCount = document.querySelectorAll('.slider-track img').length;
let i = 0;

function changeImg() {
  i = (i < imgCount - 1) ? i + 1 : 0;
  track.style.transform = `translateX(-${i * 100}vw)`;
}

window.onload = () => {
  setInterval(changeImg, 3000);
}

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