js jq 带焦点切换轮播

完整的代码, 可以复制引用

// jquery-3.6.0.min.js

    <div class="ddd">
    <!-- 按钮输入区域 -->
    <div class="input">
        <input type="button" value="1" class="red">
        <input type="button" value="2">
        <input type="button" value="3">
        <input type="button" value="4">
        <input type="button" value="5">
    </div>

        <!-- 图片展示区域 -->
    <div class="da">
        <ul>
            <li><img src="images/1.jpg"></li>
            <li><img src="images/2.jpg"></li>
            <li><img src="images/3.gif"></li>
            <li><img src="images/4.jpg"></li>
            <li><img src="images/5.jpg"></li>
        </ul>
    </div>
</div>

        $(function() {
        var index = 0; // 当前显示图片的索引

        // 鼠标悬停在数字按钮上时的事件处理
        $('.input input').on('mouseover', function() {
            $('.input input').removeClass('red'); // 移除所有按钮的红色高亮
            $(this).addClass("red"); // 高亮当前按钮
            index = $(this).index(); // 获取当前按钮的索引
            $('.da ul').animate({ marginTop: index * -200 }); // 根据索引调整图片列表的位置
        });

        // 定时器，每2秒钟自动切换到下一张图片
        time = setInterval(ds, 2000);

        // 鼠标悬停在整个容器上时，停止定时器
        $('.ddd').mouseover(function() { clearInterval(time); });

        // 鼠标离开整个容器时，重新启动定时器
        $('.ddd').mouseout(function() { time = setInterval(ds, 2000); });

        // 自动切换图片的函数
        function ds() {
            index++;
            if (index < $('li').length) { // 如果还有下一张图片
                $('.da ul').animate({ marginTop: index * -200 });
                $('.input input').removeClass('red');
                $('.input input').eq(index).addClass("red");
            } else { // 如果已经是最后一张图片，返回第一张
                index = 0;
                $('.da ul').animate({ marginTop: index * -200 });
                $('.input input').removeClass('red');
                $('.input input').eq(index).addClass("red");
            }
        }
    });