如何为JS的changePicture函数添加fadeIn、fadeOut淡入淡出动画效果

核心思路 #

• 先预加载所有轮播图片，避免切换时因图片加载延迟出现灰色渐变底色
• 通过CSS过渡实现淡入淡出效果，调整JS逻辑匹配动画时序，保证动画流畅执行

所需CSS代码 #

在你的样式文件中添加以下规则，和原有banner样式共存即可：

#banner {
    /* 0.5s是淡入淡出时长，可自行调整 */
    transition: opacity 0.5s ease;
}
#banner.fade-out {
    opacity: 0;
}

修改后的JS代码 #

let i = 0;
const images = [];
const slideTime = 3000; // 单张图片展示时长
const fadeTime = 500; // 和CSS中设置的过渡时长保持一致
const banner = document.getElementById('banner');

images[0] = 'images/banner-bg.jpg'
images[1] = 'images/banner-bg2.jpg'
images[2] = 'images/banner-bg3.jpg'
images[3] = 'images/banner-bg4.jpg'
images[4] = 'images/banner-bg5.jpg'

// 图片预加载逻辑，页面加载时就把所有轮播图存入缓存
const preloadImages = () => {
    images.forEach(imgUrl => {
        const img = new Image();
        img.src = imgUrl;
    })
}

function changePicture(){
    // 触发淡出动画
    banner.classList.add('fade-out');
    
    // 等待淡出动画完成后更换图片
    setTimeout(() => {
        // 替换背景图，已预加载无延迟
        banner.style.backgroundImage = `linear-gradient(rgba(0, 0, 0, 0.7), rgba(0, 0, 0, 0.7)),url(${images[i]})`;
        // 触发淡入动画
        banner.classList.remove('fade-out');

        // 切换索引
        i = i < images.length - 1 ? i + 1 : 0;

        // 等待当前图片展示完成后执行下一轮切换
        setTimeout(changePicture, slideTime);
    }, fadeTime)
}

window.onload = () => {
    preloadImages();
    changePicture();
};

补充说明 #

• 原有代码切换时出现灰色底色，是因为新图片还在加载中，浏览器只会先显示你设置的渐变层，预加载逻辑可以彻底解决这个问题
• 如果你不想让opacity影响banner内部的文字内容，可以改成用两个重叠的banner层实现：下层放置即将显示的图片，上层放置当前显示的图片，只过渡上层的opacity即可

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