javascript - 背景图像滑块的淡入、淡出和时间间隔

Question

为什么这不能正常工作？我已经尝试了所有不同的毫秒，脚本不会转换成我想要的（每个背景作为幻灯片每隔一些固定的秒）。谢谢！

$(document).ready(() => {

    function slider() {
        $('#background-one').fadeIn(1000, function() {
            $('#background-one').delay(2000).fadeOut(1000, function() {
                $('#background-two').fadeIn(1000, function() {
                    $('#background-two').delay(2000).fadeOut(1000, function() {
                        $('#background-three').fadeIn(1000, function() {
                            $('#background-three').delay(2000).fadeOut(1000, function() {
                                $('#background-four').fadeIn(1000, function() {
                                    $('#background-four').delay(2000).fadeOut(1000)
                                })
                            })
                        })
                    })
                })
            })
        })
    }

    setInterval(slider, 8000);

    slider();

})

更新！

我解决了一种基于此的方法。

这是 index.html

<div id="main-container">

    <div id="left-selector"><</div>
    <div id="right-selector">></div>

    <div id="back-img-1"></div>
    <div id="back-img-2"></div>
    <div id="back-img-3"></div>
    <div id="back-img-4"></div>

</div>

这是style.css

#back-img-1, #back-img-2, #back-img-3, #back-img-4 {
    position: fixed;
    top: 0;
    left: 0;
    background-repeat: no-repeat;
    background-position: center;
    background-size: cover;
    width: 100%;
    height: 100%;
}

#back-img-1 {
    background-image: url('./img/aopoi.jpg');
}

#back-img-2 {
    background-image: url('./img/nanduti.jpg');
    display: none;
}

#back-img-3 {
    background-image: url('./img/encaje.jpg');
    display: none;
}

#back-img-4 {
    background-image: url('./img/jeans.jpg');
    display: none;
}

最后是工作代码！

$(document).ready(() => {

let numImages = 4;
let currentImage = 1;

function changeImage() {
    $('#back-img-' + currentImage).fadeOut(1000, function() {
        if (currentImage === numImages) {
            currentImage = 0;
        }
        currentImage++;
        $('#back-img-' + currentImage).fadeIn(1000, function() {
            changeImage();
        });
    })
}

changeImage();

})

标签： javascriptjquery