如何向轮播添加过渡？

Question

我有一个自己创建的旋转木马，我想知道如何用 JS 做到这一点。 我知道如何通过 CSS 做到这一点，但问题是照片的变化。 为什么要更改 src 所以这是我的问题。 如果有人知道我如何在 JS 中做到这一点，那就没问题了。 也许改变类或什么。

 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", ]; window.onload = function playFoto() { carruselLi[positionCarrusel].style.backgroundColor = "red"; if (positionCarrusel >= carruselPhotos.length) { positionCarrusel++; } else if (positionCarrusel > carruselPhotos.length) {} imagenEnsaladas.src = carruselPhotos[positionCarrusel]; buttonNext.addEventListener("click", clickNextFoto); function clickNextFoto() { if (positionCarrusel >= carruselPhotos.length - 1) { positionCarrusel = 0; } else { positionCarrusel++; console.log(positionCarrusel); } imagenEnsaladas.src = carruselPhotos[positionCarrusel]; for (let i = 0; i < carruselLi.length; i++) { if (i === positionCarrusel) { carruselLi[positionCarrusel].style.backgroundColor = "red"; } else { carruselLi[i].style.backgroundColor = "#1a1d20"; } } } };

 .textoNovedades { margin: 0% 5% 0% 5%; line-height: 30px; } .tablaNovedadesEnsalada { display: flex; flex-direction: row-reverse; background: #1a1d20; color: rgb(246, 225, 185); justify-content: center; align-items: center; padding: 2% 2% 2% 2%; width: 100%; } .carruselEnsaladas { display: flex; flex-direction: column; justify-content: center; align-items: center; } .nextPhoto { background-image: url(assets/carrusel/siguiente.jpg); background-size: auto; background-position-x: 54%; border-radius: 12px; background-position-y: 47%; width: 60%; height: 9vh; margin: 7%; border: 3px; box-shadow: 3px 3px 3px #999; } .tablaNovedadesEnsalada ul { list-style: none; }

 <section class="tablaNovedadesEnsalada"> <div class="carruselEnsaladas"> <img src="" alt="photos carrusel" id="photosEnsaladas" class="photosEnsaladas"> <button id="nextPhoto" class="nextPhoto"> </button> </div> <p class="textoNovedades"> <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> </p> </section>