jQuery实现图片无缝滚动![image.png](https://p1-juejin.byteimg.com/tos

<!DOCTYPE html>
<html lang="en">

<head>
    <meta charset="UTF-8">
    <meta http-equiv="X-UA-Compatible" content="IE=edge">
    <meta name="viewport" content="width=device-width, initial-scale=1.0">
    <title>Document</title>
    <style>
        * {
            margin: 0;
            padding: 0;
        }

        .box {
            width: 690px;
            height: 130px;
            border: 1px solid red;
            margin: 70px auto;
            display: flex;
            align-items: center;
            position: relative;
            overflow: hidden;
        }

        .nav {
            display: flex;
            justify-content: center;
            margin-top: 80px;
        }

        .nav a {
            margin: 0 10px;
        }

        #list {
            list-style: none;
            display: flex;
            position: absolute;
            left: 0;

        }

        #list li {
            margin: 0 5px;
            border: 1px solid #ccc;
            padding: 5px;
        }

        #list li img {
            display: block;
            width: 220px;
        }
    </style>
</head>

<body>
    <div class="nav">
        <a href="#" id="prev">向左走</a>
        <a href="#" id="next">向右走</a>
    </div>
    <div class="box">
        <ul id="list">
            <li><img src="https://img1.baidu.com/it/u=2218815005,3124653454&fm=253&app=138&size=w931&n=0&f=JPEG&fmt=auto?sec=1664038800&t=70ca5c0af59fa7b24aa0affa4d324d54"
                    alt=""></li>
            <li><img src="https://img2.baidu.com/it/u=3744598050,4191464688&fm=253&app=138&size=w931&n=0&f=JPEG&fmt=auto?sec=1664038800&t=f0ace1c7e73b31a6d4622de4130c8729"
                    alt=""></li>
            <li><img src="https://img1.baidu.com/it/u=3217543765,3223180824&fm=253&app=120&size=w931&n=0&f=JPEG&fmt=auto?sec=1664038800&t=45b7c74cd9f8416665564deb14b79cdc"
                    alt=""></li>
            <li><img src="https://img1.baidu.com/it/u=2204132179,643663242&fm=253&fmt=auto&app=120&f=JPEG?w=1200&h=800"
                    alt=""></li>
        </ul>
    </div>

    <script src="https://cdn.bootcdn.net/ajax/libs/jquery/3.5.1/jquery.min.js"></script>
    <script>

        let myli = $('#list').html() + $('#list').html();
        $('#list').html(myli)

        let num = 5;

        setInterval(() => {
            // 判断#list的距离左侧的位置，如果 小于 #list的总宽度的一半，就回头
            if ($('#list').position().left < - $('#list').width() / 2) {
                $('#list').css('left', '0')
            }

            // 判断#list距离左侧是否大于0，如果大于0，把位置设置为 本身宽度的一半且为负数
            if ($('#list').position().left > 0) {
                $('#list').css('left', - $('#list').width() / 2 + 'px')
            }
            $('#list').css('left', $('#list').position().left + num + 'px');
        }, 30);


        // 向左走
        $('#prev').click(function (e) {
            e.preventDefault();
            num = -1;
        });

        // 向右走
        $('#next').click(function (e) {
            e.preventDefault();
            num = 5
        });
    </script>
</body>

</html>