无缝滚动效果（鼠标移入暂停、单图暂停一段时间然后继续效果）

白泽的笔记

于 2022-08-12 09:15:42 发布

阅读量386

点赞数

文章标签： javascript html5 前端

本文链接：https://blog.csdn.net/m0_51024444/article/details/126297170

版权

无缝滚动效果（鼠标移入暂停）

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

        ul {
            list-style: none;
        }

        .box {
            overflow: auto;
            width: 300px;
            height: 360px;
            margin: 20px auto;
            box-shadow: 0 0 4px rgba(0, 0, 0, .5);
        }

        .box ul {
            padding-left: 20px;
        }

        .box ul li {
            line-height: 40px;
        }
    </style>
</head>

<body>
    <div class="box">
        <ul class="content">
            <li>javascript从入门到泪奔1</li>
            <li>javascript从入门到泪奔2</li>
            <li>javascript从入门到泪奔3</li>
            <li>javascript从入门到泪奔4</li>
            <li>javascript从入门到泪奔5</li>
            <li>javascript从入门到泪奔6</li>
            <li>javascript从入门到泪奔7</li>
            <li>javascript从入门到泪奔8</li>
            <li>javascript从入门到泪奔9</li>
            <li>javascript从入门到泪奔10</li>
        </ul>
    </div>

</body>
<script>
    var oDiv = document.querySelector(".box");
    var oUl = document.querySelector(".box ul");
    oUl.innerHTML = oUl.innerHTML + oUl.innerHTML;
    var timer = null;

    // 用来获取元素实际内容大小
    // console.log(oDiv.scrollWidth);
    // console.log(oDiv.scrollHeight);

    //当鼠标移入div时，关闭计时器
    oDiv.onmouseover = function () {
        clearInterval(timer);
    }

    //当鼠标移开div时，开启计时器
    oDiv.onmouseout = function () {
        autoPlay();
    }
</script>

</html>

无缝滚动效果（鼠标移入暂停、单图暂停一段时间然后继续效果）

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

        ul {
            list-style: none;
        }

        .box {
            overflow: hidden;
            width: 300px;
            height: 40px;
            margin: 20px auto;
            box-shadow: 0 0 4px rgba(0, 0, 0, .5);
        }

        .box ul {
            padding-left: 20px;
        }

        .box ul li {
            line-height: 40px;
        }
    </style>
</head>

</body>
<script>
    var oDiv = document.querySelector(".box");
    var oUl = document.querySelector(".box ul");
    oUl.innerHTML = oUl.innerHTML + oUl.innerHTML;
    var timer = null;

    function autoPlay() {
        timer = setInterval(() => {
            oDiv.scrollTop++;
            if (oDiv.scrollTop >= oDiv.scrollHeight / 2) {
                oDiv.scrollTop = 0;
            }

            //滚一行停止一下
            if (oDiv.scrollTop % 40 === 0) {
                clearInterval(timer);
                setTimeout(() => {
                    autoPlay();
                }, 1000);
            }
        }, 20);
    }
    autoPlay();

    //当鼠标移入div时，关闭计时器
    // oDiv.onmouseover = function () {
    //     clearInterval(timer);
    // }

    //当鼠标移开div时，开启计时器
    // oDiv.onmouseout = function () {
    //     autoPlay();
    // }
</script>

</html>