向上轮播图 JavaScript

最新推荐文章于 2022-06-08 21:50:15 发布

weixin_41765288

最新推荐文章于 2022-06-08 21:50:15 发布

阅读量554

点赞数

文章标签： JavaScript 向上轮播图

本文链接：https://blog.csdn.net/weixin_41765288/article/details/103237610

版权

向上轮播图，新闻，公告轮播，记录一下，以后方便用

<html>

<head>
    <title>vue</title>
    <meta charset="utf-8">
    <script src="https://cdn.jsdelivr.net/npm/vue"></script>
    <style>
        * {
            list-style: none;
            padding: 0px;
            margin: 0px;
        }

        #hot-box {
            height: 30px;
            border: 1px solid #ccc;
            overflow: hidden;
            width: 200px;
            margin: 50px auto;
        }

        #hot-box li {
            line-height: 30px;
            padding: 0 10px;
            height: 30px;
        }
    </style>
</head>

<body>
    <div id="hot-box">
        <ul id="hot-content01">
            <li>1111</li>
            <li>2222</li>
            <li>3333</li>
            <li>4444</li>
            <li>5555</li>
            <li>0000</li>
        </ul>
        <ul id="hot-content02"></ul>
    </div>
</body>
<script>
    var timer, timeout;
    // 滚动速度 越小越快
    var speed = 40;
    var hotBox = document.querySelector('#hot-box');
    var hotContent01 = document.querySelector('#hot-content01');
    var hotContent02 = document.querySelector('#hot-content02');
    // 将hotContent01内容复制到hotContent02
    hotContent02.innerHTML = hotContent01.innerHTML;
    function runUp() {
        clearTimeout(timeout)
        // hotContent01已经向上滚出了hotBox范围
        if (hotContent02.offsetTop - hotBox.scrollTop <= 0) {
            // 设置hotBox恢复到刚开始的位置
            hotBox.scrollTop = hotBox.scrollTop - hotContent01.offsetHeight;
        } else {
            hotBox.scrollTop++;
            // 什么时候停下
            if (hotBox.scrollTop % 30 == 0) {
                clearTimeout(timeout);
                clearInterval(timer);
                timeout = setTimeout(function () {
                    hotBox.scrollTop++;
                    return timer = setInterval(runUp, speed);
                }, 1000);
            }
        }
    }
    timer = setInterval(runUp, speed);
</script>

</html>