如何实现HTML轮播横幅的平滑过渡效果？

你的核心问题是用display: none/block切换幻灯片，这个属性不支持CSS过渡，所以加了transition也看不到效果。下面给你两种可行的优化方案：

方案一：滑动式过渡（左右滑动切换） #

修改CSS #

.slider-container {
  position: relative;
  width: 100%;
  max-width: 100%;
  margin-top: 100px;
  overflow: hidden; /* 隐藏容器外的幻灯片 */
  border: 2px solid black;
}

.slider-container .img-slider {
  position: relative;
  width: 100%;
  height: 550px;
  display: flex; /* 让幻灯片横向排列 */
  transition: transform 0.6s ease; /* 滑动过渡动画 */
}

.slider-container .img-slider .slide {
  width: 100%; /* 每张幻灯片占满容器宽度 */
  flex-shrink: 0; /* 禁止幻灯片收缩 */
  position: relative;
}

/* 保留原有内容样式，移除无效的clip-path过渡 */
.slider-container .img-slider .slide img {
  width: 100%;
  object-position: 0 -120px;
  display: block;
}

.slider-container .img-slider .slide .info {
  position: absolute;
  top: 0;
  padding: 15px 30px;
}

.slider-container .img-slider .slide .info h2 {
  color: #ffffff;
  font-size: 45px;
  text-transform: uppercase;
  font-weight: 800;
  letter-spacing: 2px;
  text-shadow: 0 0 10px rgba(0, 0, 0, 0.5);
}

.slider-container .img-slider .slide .info p {
  color: #fff;
  background: #171716;
  opacity: 0.7;
  font-size: 16px;
  line-height: 1.5;
  width: 500px;
  padding: 15px;
  margin-top: 20px;
  border-radius: 4px;
}

.slider-container .prev,
.slider-container .next {
  box-shadow: none;
  cursor: pointer;
  position: absolute;
  top: 50%;
  width: auto;
  margin-top: -22px;
  padding: 16px;
  color: white;
  font-weight: bold;
  font-size: 18px;
  transition: 0.6s ease;
  border-radius: 0 3px 3px 0;
  user-select: none;
}

.slider-container .next {
  right: 0;
  border-radius: 3px 0 0 3px;
}

.slider-container .prev:hover,
.slider-container .next:hover {
  background-color: rgba(0, 0, 0, 0.8);
}

修改JavaScript #

const slides = document.querySelectorAll(".img-slider .slide");
const prevButton = document.querySelector(".img-slider .prev")
const nextButton = document.querySelector(".img-slider .next");
const imgSlider = document.querySelector(".img-slider"); // 获取滑块容器
let currentSlide = 1;

function changeSlide(n) {
  showSlide((currentSlide += n));
}

function showSlide(n) {
  if (n > slides.length) {
    currentSlide = 1;
  }
  if (n < 1) {
    currentSlide = slides.length;
  }
  // 通过移动容器实现滑动效果
  imgSlider.style.transform = `translateX(-${(currentSlide - 1) * 100}%)`;
  
  // 可选：更新active类标记当前幻灯片
  slides.forEach(slide => slide.classList.remove("active"));
  slides[currentSlide - 1].classList.add("active");
}

showSlide(currentSlide);

prevButton.addEventListener("click", () => {
  changeSlide(-1);
});

nextButton.addEventListener("click", () => {
  changeSlide(+1);
});

方案二：淡入淡出过渡 #

如果更喜欢淡入淡出效果，用下面的修改：

修改CSS #

.slider-container {
  position: relative;
  width: 100%;
  max-width: 100%;
  margin-top: 100px;
  overflow: hidden;
  border: 2px solid black;
}

.slider-container .img-slider {
  position: relative;
  width: 100%;
  height: 550px;
}

.slider-container .img-slider .slide {
  position: absolute; /* 所有幻灯片重叠 */
  top: 0;
  left: 0;
  width: 100%;
  opacity: 0; /* 默认隐藏 */
  transition: opacity 0.6s ease; /* 淡入淡出过渡 */
  pointer-events: none; /* 隐藏的幻灯片不响应交互 */
}

.slider-container .img-slider .slide.active {
  opacity: 1; /* 显示当前幻灯片 */
  pointer-events: auto;
}

/* 保留原有内容样式 */
.slider-container .img-slider .slide img {
  width: 100%;
  object-position: 0 -120px;
  display: block;
}

.slider-container .img-slider .slide .info {
  position: absolute;
  top: 0;
  padding: 15px 30px;
}

.slider-container .img-slider .slide .info h2 {
  color: #ffffff;
  font-size: 45px;
  text-transform: uppercase;
  font-weight: 800;
  letter-spacing: 2px;
  text-shadow: 0 0 10px rgba(0, 0, 0, 0.5);
}

.slider-container .img-slider .slide .info p {
  color: #fff;
  background: #171716;
  opacity: 0.7;
  font-size: 16px;
  line-height: 1.5;
  width: 500px;
  padding: 15px;
  margin-top: 20px;
  border-radius: 4px;
}

.slider-container .prev,
.slider-container .next {
  box-shadow: none;
  cursor: pointer;
  position: absolute;
  top: 50%;
  width: auto;
  margin-top: -22px;
  padding: 16px;
  color: white;
  font-weight: bold;
  font-size: 18px;
  transition: 0.6s ease;
  border-radius: 0 3px 3px 0;
  user-select: none;
}

.slider-container .next {
  right: 0;
  border-radius: 3px 0 0 3px;
}

.slider-container .prev:hover,
.slider-container .next:hover {
  background-color: rgba(0, 0, 0, 0.8);
}

修改JavaScript #

const slides = document.querySelectorAll(".img-slider .slide");
const prevButton = document.querySelector(".img-slider .prev")
const nextButton = document.querySelector(".img-slider .next");
let currentSlide = 1;

function changeSlide(n) {
  showSlide((currentSlide += n));
}

function showSlide(n) {
  if (n > slides.length) {
    currentSlide = 1;
  }
  if (n < 1) {
    currentSlide = slides.length;
  }
  // 切换active类实现淡入淡出
  slides.forEach(slide => slide.classList.remove("active"));
  slides[currentSlide - 1].classList.add("active");
}

showSlide(currentSlide);

prevButton.addEventListener("click", () => {
  changeSlide(-1);
});

nextButton.addEventListener("click", () => {
  changeSlide(+1);
});

关键说明 #

• display: none/block无法触发CSS过渡，因为浏览器会直接隐藏/显示元素，不会计算中间状态。
• 滑动过渡通过移动整个幻灯片容器实现，利用transform: translateX()配合transition，这个属性支持平滑动画。
• 淡入淡出通过修改opacity属性实现，同样支持transition动画，同时用position: absolute让幻灯片重叠。

内容的提问来源于stack exchange，提问作者NamQi Ch.