小编mus*_*nov的帖子

我正在为我的网站构建轮播（幻灯片）效果，但没有什么问题。每次图像更改时我都想制作淡入淡出效果。所以我为其添加了一个带有动画的类。问题来了。

该函数每 3 秒触发一次 ( setInterval)

let sliderInterval = setInterval(nextImg, 3000);

function nextImg() {
    imgChange(sliderNum + 1);
}

const heroImg = document.querySelector('.hero__image');

function imgChange(x) {
    heroImg.classList.remove("fade");
    sliderNum = (x + imgLocations.length) % imgLocations.length;
    heroImg.src = imgLocations[sliderNum];
    heroImg.classList.add("fade");
}

淡入淡出效果：

.fade {
    animation: fade 1.5s ease-in-out;
}

@keyframes fade {
    from {opacity: .4}
    to {opacity: 1}
}

<div class="hero">
<img class="hero__image" src="photo1">
</div>

它仅适用于第一个图像切换。尽管在函数开始时，它会删除fade我在函数中看到的类，它保留在元素中并且不会消失。hero我是否尝试将此效果放在该部分上或img其中并不重要。