jq图片滚动衔接-526互联

<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;
    }

    ul {
        list-style: none;
    }

    .box {
        width: 650px;
        height: 250px;
        margin: 20px auto;
    }

    .box ul {
        overflow: hidden;
        display: flex;

    }

    .box ul li {
        width: 650px;
        height: 250px;
    }
</style>

</head> <body>

<div class="box">
    <ul>
        <li><a href="#"><img src="./31/01.jpg" alt=""></a></li>
        <li><a href="#"><img src="./31/02.jpg" alt=""></a></li>
        <li><a href="#"><img src="./31/03.jpg" alt=""></a></li>
        <li><a href="#"><img src="./31/04.jpg" alt=""></a></li>
        <li><a href="#"><img src="./31/05.jpg" alt=""></a></li>
    </ul>
</div>

<script src="./jquary-3.6.4.min.js"></script>
<script>

    var left = 0;
    let timer = null;
    function autoPlay() {
        timer = setInterval(function () {
            // 让图片滚动起来
            $('.box ul li').first().animate({ 'marginLeft': left-- }, 0, function () {
                // 图片超出后
                if (-left > $(this).width()) {
                    // 追加到最后面
                    $('.box ul').append($(this).css('marginLeft', 0))
                    left = 0;
                }
            })
        }, 20)
    }
    autoPlay();
    // 鼠标移入滚动暂停
    $('.box').hover(function () {
        // 鼠标移入停止滚动
        clearInterval(timer);
    }, function () {
        // 离开继续滚动
        autoPlay();
    })
</script>

</body>