7,jQuery动画轮播图

/*CSS 样式*/
<style>
        * {
            padding: 0;
            margin: 0;
            list-style: none;
        }

        img {
            width: 808px;
            height: 508px;
        }

        .a {
            width: 812px;
            height: 512px;
            margin: 100px auto;
            /* text-align: center; */
            border: 8px solid red;
        }

        li {
            display: none;
            float: left;
        }

        span {
            display: block;
            background-color: red;
            border-radius: 50%;
            width: 30px;
            height: 30px;
            float: left;
            margin: 10px;
        }

        body {
            position: relative;
        }

        .a1 {
            position: absolute;
            margin-top: 430px;
            margin-left: 300px;
        }

        .a2 {
            background-color: #fff;
        }
    </style>

<div class="a">
        <ul>
            <li style="display: block;"><img src="./img/01.jpeg"></li>
            <li><img src="./img/02.webp"></li>
            <li><img src="./img/03.webp"></li>
            <li><img src="./img/04.webp"></li>
        </ul>
        <div class="a1">
            <span class="a2"></span>
            <span></span>
            <span></span>
            <span></span>
        </div>
    </div>

<script src="./js/jquery.min.js"></script>
    <script>
        $(function () {
            var imgw = $('li').eq(0).width();  //图片的宽度
            var idx = 0;
            // 点击小圆
            $('span').click(function () {
                // console.log($('span'));
                // 点击当前span使其变为白色  其他为红色
                $(this).addClass('a2').siblings().removeClass('a2')
                // 点击span圆点按钮 当前索引的留下 显示对应图片  隐藏其他兄弟元素
                $('li').eq($(this).index()).show().siblings().hide();
                // idx=$(this).index();  
                $('ul').animate({
                    left: -imgw * idx,
                })
            })
            var timer = null;
            function next() {
                // 间歇定时器  每隔俩秒切换图片
                timer = setInterval(function () {
                    idx++;  //自加  轮播图自动旋转
                    if (idx > $('span').length - 1) { //最后一张时 索引改为0
                        idx = 0;
                    }
                    $('span').eq(idx).trigger('click');
                }, 2000)  //设置间隔
            }
            next(); //调用
            $('a').hover(function () {
                clearInterval(timer);
            }, next)
        })
    </script>

大佬勿喷