如何实现使用JS和jQuery进行图片动画和动态切换？

javascript，，，，，，图片切换示例，，，，，切换图片，，        $(document).ready(function() {，            $("#switch").click(function() {，                if ($("#image").attr("src") === "image1.jpg") {，                    $("#image").attr("src", "image2.jpg");，                } else {，                    $("#image").attr("src", "image1.jpg");，                }，            });，        });，，，，

<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF8">
    <meta name="viewport" content="width=devicewidth, initialscale=1.0">
    <title>图片动画示例</title>
    <script src="https://code.jquery.com/jquery3.6.0.min.js"></script>
    <style>
        #imageContainer {
            width: 300px;
            height: 200px;
            position: relative;
            overflow: hidden;
        }
        #imageContainer img {
            position: absolute;
            transition: opacity 1s easeinout;
        }
    </style>
</head>
<body>
    <div id="imageContainer">
        <img src="image1.jpg" alt="Image 1" class="active">
        <img src="image2.jpg" alt="Image 2">
    </div>
    <script>
        $(document).ready(function() {
            var currentIndex = 0;
            var images = $('#imageContainer img');
            var totalImages = images.length;
            function switchImage() {
                images.eq(currentIndex).removeClass('active').css('opacity', '0');
                currentIndex = (currentIndex + 1) % totalImages;
                images.eq(currentIndex).addClass('active').css('opacity', '1');
            }
            setInterval(switchImage, 3000); // 每3秒切换一次图片
        });
    </script>
</body>
</html>

（图片来源网络，侵删）