滚动淡入淡出图像(jquery)

<script src="https://cdn.staticfile.org/jquery/3.5.1/jquery.min.js"></script>

<div id="imageContainer">
    <img src="image1.jpg" alt="Image 1">
    <img src="image2.jpg" alt="Image 2">
    <img src="image3.jpg" alt="Image 3">
</div>

#imageContainer {
    width: 800px;
    height: 400px;
    position: relative;
    overflow: hidden;
}

#imageContainer img {
    position: absolute;
    top: 0;
    left: 0;
    width: 100%;
    height: 100%;
    opacity: 0;
    transition: opacity 0.5s;
}

$(document).ready(function() {
    var images = $("#imageContainer img");
    var currentIndex = 0;
    var maxIndex = images.length - 1;

    function fadeInOut() {
        $(images[currentIndex]).fadeOut("slow", function() {
            currentIndex = (currentIndex == maxIndex) ? 0 : currentIndex + 1;
            $(images[currentIndex]).fadeIn("slow");
        });
    }

    setInterval(fadeInOut, 3000);
});