js文字无限循环向上滚动轮播 

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

<head>
    <meta charset="UTF-8">
    <meta name="viewport" content="width=device-width, initial-scale=1.0">
    <link rel="stylesheet">
    <title>滚动文字</title>
    <style>
        * {
            margin: 0;
            padding: 0;
        }

        ul,
        li {
            list-style: none;
            display: block;
        }

        #scrollBox {
            height: 150px;
            width: 300px;
            margin: 100px auto;
            background: red;
            overflow: hidden;
            color: #fff;
        }

        #scrollBox #con1,
        #con2 {
            width: 280px;
            float: left;
        }

        #scrollBox li {
            height: 15px;
            line-height: 15px;
            text-align: center;
            margin-bottom: 15px
        }
    </style>
</head>

<body>
    <div id="scrollBox">
        <ul id="con1">
            <li> 1、浓雾 犹如波纹般散开</li>
            <li> 2、我多像是 一颗粒子醒来</li>
            <li> 3、无止境的水域</li>
            <li> 4、旋转在其中的银河</li>
            <li> 5、只留下了一道沉默的白</li>
            <li> 6、四周 是否从未有谁在</li>
        </ul>
        <ul id="con2"></ul>
    </div>

    <script>

        var box = document.getElementById("scrollBox");
        var con1 = document.getElementById("con1");
        var con2 = document.getElementById("con2");
        con2.innerHTML = con1.innerHTML;

        var liLen = con1.getElementsByTagName('li');
        console.log('liLen ', liLen);
        console.log('liLen ', liLen.length);

        function scrollUp() {
            if (box.scrollTop >= con1.offsetHeight) {
                box.scrollTop = 0;
            } else {
                box.scrollTop++;
            }
        }
        // 大于6条数据 开始滚动
        if (liLen.length > 5) {
            var time = 50;
            var mytimer = setInterval(scrollUp, time);
            box.onmouseover = function () {
                clearInterval(mytimer);
            };
            box.onmouseout = function () {
                mytimer = setInterval(scrollUp, time);
            };

        }


    </script>
</body>

</html>

posted @ 2024-08-07 16:15  蓝色精灵jah  阅读(446)  评论(0)    收藏  举报