如何使用JavaScript添加易入易出效果

嗯，我是javascript新手，我正在学习。现在我想在这段代码中添加一个轻松的效果..我该怎么做

let slideIndex = 0;

const showSlides = () => {
    const slides = document.getElementsByClassName("slide");

    for(let i = 0; i < slides.length; i++){
    slides[i].style.display = "none";
    }

    slideIndex++;

    if(slideIndex > slides.length){
    slideIndex = 1;
    }

    slides[slideIndex - 1].style.display = "block";
    setTimeout(showSlides,3000);
};

showSlides();

让slideIndex=0；
常量showSlides=（）=>{
常量幻灯片=document.getElementsByClassName（“幻灯片”）；
for（设i=0；i幻灯片长度）{
slideIndex=1；
}
幻灯片[slideIndex-1].style.display=“block”；
设置超时（幻灯片显示，3000）；
};
放映幻灯片（）；

您可以使用css：

.slide {
  transition: opacity 1s ease;
}

有关更多信息，请查看：

然后不切换显示，而是切换不透明度：

slides[i].style.opacity = 0; // hide

slides[i].style.opacity = 1; // show

---

现在使用动画库。当你有更多的经验时再回来。如果您还不熟悉编码，则执行平滑性能的跨浏览器动画并非易事。