js 无缝滚动

最新推荐文章于 2024-08-22 14:32:34 发布

木心操作

最新推荐文章于 2024-08-22 14:32:34 发布

阅读量698

点赞数

分类专栏： javascript 文章标签： javascript css html

本文链接：https://blog.csdn.net/qq_41579327/article/details/122689646

版权

javascript 专栏收录该内容

21 篇文章 0 订阅

订阅专栏

css：

.play {
    margin-top: 3rem;
    height: 15rem;
    overflow: hidden;
    background-color: #f2f7ff;
    border-top: 1rem #f2f7ff solid;
    border-bottom: 1rem #f2f7ff solid;
    border-radius: .5rem;
}

.play ul {
    margin: 0px;
    list-style: none;
}

.play ul li {
    padding: 1rem 0;
}

html：

            <div id="play_div1" class="play">
                <ul id="play_ul1">
                    <li>今天，不只是小年！ 我是一条鱼</li>
                    <li>小年到 送你一副虎年吉祥春联</li>
                    <li>北京冬奥制冰技术：为全球树立环保制冰典范</li>
                    <li>2022：民生有温度</li>
                    <li>今天，不只是小年！ 我是一条鱼</li>
                    <li>小年到 送你一副虎年吉祥春联</li>
                    <li>北京冬奥制冰技术：为全球树立环保制冰典范</li>
                    <li>2022：民生有温度</li>
                </ul>
                <ul id="play_ul2"></ul>
            </div>

js：

function rollPlay(div1, ul1, ul2) {
        var div1 = document.getElementById(div1);
        var ul1 = document.getElementById(ul1);
        var ul2 = document.getElementById(ul2);
        ul2.innerHTML = ul1.innerHTML;
        setInterval(function () {
            if (div1.scrollTop >= ul1.offsetHeight) {
                div1.scrollTop = 0;
            } else {
                div1.scrollTop++;
            }
        }, 30)
    }

    rollPlay('play_div1','play_ul1','play_ul2')

参考简书：小福饼