如何为自定义JavaScript轮播图添加切换过渡效果？

方案1：单图片节点淡入淡出切换（无需修改HTML结构） #

直接修改img的src属性不会触发CSS过渡，我们可以通过控制透明度过渡的时机，实现平滑切换：

第一步：补充CSS样式

在你现有CSS的基础上新增如下规则：

.photosEnsaladas {
  width: 300px;
  height: 300px;
  object-fit: cover;
  /* 配置透明度过渡效果 */
  transition: opacity 0.4s ease-in-out;
  opacity: 1;
}

.photosEnsaladas.fade {
  opacity: 0;
}

/* 修复你原代码里的HTML错误：p标签不能嵌套ul，这里给ul加样式替换原来的textoNovedades样式 */
#carruselLista {
  margin: 0 5%;
  line-height: 30px;
}

第二步：修改JS逻辑

调整切换逻辑，先触发淡出过渡，过渡完成后修改src，图片加载完成后再触发淡入：

let imagenEnsaladas = document.getElementById("photosEnsaladas");
let buttonNext = document.getElementById("nextPhoto");
let carruselLi = document.getElementById("carruselLista").getElementsByTagName("li");
let positionCarrusel = 0;
let carruselPhotos = [
  "assets/carrusel/ens.-ventresca-300-x300-300x300.png",
  "assets/carrusel/ensalada bacalao200x200.png",
  "assets/carrusel/ensalada-alcachofas-300x-300-300x300.jpg",
  "assets/carrusel/ENsalada-yemas-300x300.png",
  "assets/carrusel/ensalada-de-queso-cabra300x300-300x300.png",
];

// 抽离公共方法：更新指示器状态
function updateIndicator() {
  for (let i = 0; i < carruselLi.length; i++) {
    carruselLi[i].style.backgroundColor = i === positionCarrusel ? "red" : "#1a1d20";
  }
}

window.onload = function playFoto() {
  // 初始化第一张图和指示器
  imagenEnsaladas.src = carruselPhotos[positionCarrusel];
  updateIndicator();
  
  buttonNext.addEventListener("click", clickNextFoto);

  function clickNextFoto() {
    // 先加淡出类
    imagenEnsaladas.classList.add("fade");
    
    // 等过渡结束后修改src
    setTimeout(() => {
      // 计算下一个位置
      positionCarrusel = positionCarrusel >= carruselPhotos.length - 1 ? 0 : positionCarrusel + 1;
      imagenEnsaladas.src = carruselPhotos[positionCarrusel];
      
      // 等图片加载完成后淡入
      imagenEnsaladas.onload = () => {
        imagenEnsaladas.classList.remove("fade");
        updateIndicator();
      }
    }, 400); // 这里的时间要和CSS里的transition时长一致
  }
};

注意事项

你原HTML里<p class="textoNovedades">嵌套了<ul>，属于语法错误，p标签是行内元素不能嵌套块级元素ul，直接删除外层p标签即可，上面新增的CSS里已经给ul加了对应的外边距和行高样式。

方案2：多图片节点预加载切换（体验更流畅） #

如果你的轮播图数量不多，建议提前把所有图片都渲染到页面中，通过类名控制显隐，完全避免切换时的加载等待：

修改HTML结构

<section class="tablaNovedadesEnsalada">
  <div class="carruselEnsaladas">
    <div class="img-wrapper">
      <img src="assets/carrusel/ens.-ventresca-300-x300-300x300.png" alt="ensalada de ventresca" class="carousel-img active">
      <img src="assets/carrusel/ensalada bacalao200x200.png" alt="ensalada de laminas de bacalao" class="carousel-img">
      <img src="assets/carrusel/ensalada-alcachofas-300x-300-300x300.jpg" alt="Ensalada de alcachofas" class="carousel-img">
      <img src="assets/carrusel/ENsalada-yemas-300x300.png" alt="Ensalada de yemas" class="carousel-img">
      <img src="assets/carrusel/ensalada-de-queso-cabra300x300-300x300.png" alt="Ensalada queso cabra" class="carousel-img">
    </div>
    <button id="nextPhoto" class="nextPhoto"></button>
  </div>
  <ul id="carruselLista">
    <li value="0"> ensalada de laminas de bacalao</li>
    <li value="1"> Ensalada de alcachofas</li>
    <li value="2"> Ensalada de yemas</li>
    <li value="3">ensalada de ventresca</li>
    <li value="4">Ensalada queso cabra</li>
  </ul>
</section>

新增对应CSS

.img-wrapper {
  position: relative;
  width: 300px;
  height: 300px;
}
.carousel-img {
  position: absolute;
  top: 0;
  left: 0;
  width: 100%;
  height: 100%;
  object-fit: cover;
  opacity: 0;
  transition: opacity 0.4s ease-in-out;
}
.carousel-img.active {
  opacity: 1;
}
#carruselLista {
  margin: 0 5%;
  line-height: 30px;
}

对应JS逻辑

const carouselImgs = document.querySelectorAll(".carousel-img");
const buttonNext = document.getElementById("nextPhoto");
const carruselLi = document.querySelectorAll("#carruselLista li");
let positionCarrusel = 0;

function updateStatus() {
  // 更新图片显隐
  carouselImgs.forEach((img, idx) => {
    img.classList.toggle("active", idx === positionCarrusel);
  });
  // 更新指示器
  carruselLi.forEach((li, idx) => {
    li.style.backgroundColor = idx === positionCarrusel ? "red" : "#1a1d20";
  });
}

window.onload = () => {
  updateStatus();
  buttonNext.addEventListener("click", () => {
    positionCarrusel = positionCarrusel >= carouselImgs.length - 1 ? 0 : positionCarrusel + 1;
    updateStatus();
  });
};

这个方案不需要等待图片加载，切换更丝滑，适合轮播图数量较少的场景。

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