如何实现幻灯片切换时当前幻灯片透明度从1降至0的效果？

原代码直接隐藏当前幻灯片，没有实现淡出过渡。下面是修改后的代码，可同时实现当前幻灯片淡出、目标幻灯片淡入的连贯切换效果：

let slides = document.querySelectorAll('.slider');
let current = 0;
// 防止快速点击导致动画叠加，添加状态锁
let isAnimating = false;

// 淡出指定幻灯片，完成后执行回调
function fadeOutSlide(slideIndex, callback) {
    const slide = slides[slideIndex];
    let opacity = 1;
    const fadeInterval = setInterval(() => {
        opacity -= 0.1;
        slide.style.opacity = opacity;
        if (opacity <= 0) {
            clearInterval(fadeInterval);
            slide.style.display = 'none';
            callback();
        }
    }, 50); // 数值越小动画越快，可根据需求调整
}

// 淡入指定幻灯片
function fadeInSlide(slideIndex) {
    const slide = slides[slideIndex];
    slide.style.display = 'block';
    slide.style.opacity = 0;
    let opacity = 0;
    const fadeInterval = setInterval(() => {
        opacity += 0.1;
        slide.style.opacity = opacity;
        if (opacity >= 1) {
            clearInterval(fadeInterval);
            isAnimating = false;
        }
    }, 50);
}

function next() {
    if (isAnimating) return;
    isAnimating = true;
    const prevIndex = current;
    // 计算下一张幻灯片索引
    current = current === slides.length - 1 ? 0 : current + 1;
    // 先淡出当前幻灯片，再淡入下一张
    fadeOutSlide(prevIndex, () => {
        fadeInSlide(current);
    });
}

function prev() {
    if (isAnimating) return;
    isAnimating = true;
    const prevIndex = current;
    // 计算上一张幻灯片索引
    current = current === 0 ? slides.length - 1 : current - 1;
    // 先淡出当前幻灯片，再淡入上一张
    fadeOutSlide(prevIndex, () => {
        fadeInSlide(current);
    });
}

// 初始化显示第一张幻灯片
slides[current].style.display = 'block';
slides[current].style.opacity = 1;

关键调整说明 #

• 新增isAnimating状态锁：避免快速点击切换按钮时，多个动画同时执行导致的混乱
• 拆分淡出/淡入逻辑：将fadeOutSlide和fadeInSlide拆分为独立函数，代码更易维护和修改
• 修正原代码错误：原cls()函数中slide[current].display应为slide[current].style.display，现在已移除该函数，改用淡出完成后再隐藏幻灯片
• 统一动画参数：通过调整setInterval的毫秒值，可统一控制淡出和淡入的速度

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