js自动播放效果

最新推荐文章于 2024-01-25 12:29:03 发布

NovRed

最新推荐文章于 2024-01-25 12:29:03 发布

阅读量303

点赞数

文章标签： javascript 前端开发语言

本文链接：https://blog.csdn.net/weixin_45388942/article/details/129288964

版权

<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8" />
    <title>autoScroll</title>
</head>
<style>
    .parent {
        width: 300px;
        height: 200px;
        margin: 0 auto;
        background: #242424;
        overflow-y: scroll;
    }
    /*设置的子盒子高度大于父盒子，产生溢出效果*/
    .child {
        height: auto;
    }
    .child li {
        height: 50px;
        margin: 2px 0;
        background: #009678;
    }
</style>
<body>
    <div id="parent" class="parent">
        <div id="child1" class="child">
            <li>1</li>
            <li>2</li>
            <li>3</li>
            <li>4</li>
            <li>5</li>
        </div>
        <div id="child2" class="child"></div>
    </div>
    <script type="text/javascript">
        (function () {
            var parent = document.getElementById('parent');
            var child1 = document.getElementById('child1');
            var child2 = document.getElementById('child2');
            child2.innerHTML = child1.innerHTML;
            setInterval(function () {
               if(parent.scrollTop >= child1.scrollHeight) {
                   parent.scrollTop = 0;
               } else {
                   parent.scrollTop++;
               }
            }, 20);
        })()
    </script>
</body>
</html>