原生JS实现纵向跑马灯特效

最新推荐文章于 2024-05-14 20:08:50 发布

丁叮顶迪d

最新推荐文章于 2024-05-14 20:08:50 发布

阅读量250

点赞数

文章标签： html css javascript

本文链接：https://blog.csdn.net/weixin_43800477/article/details/130596482

版权

<!DOCTYPE html>
<html>
 
<head>
    <meta http-equiv="Content-Type" content="text/html; charset=utf-8" />
    <title>原生JS实现纵向跑马灯特效</title>
 
    <style type="text/css">
        body {
            background: #eee;
        }
        .level-warn {
            width: 120px;
            height: 220px;
            margin: 0 auto;
            background: #fff;
            border: 1px solid #ccc;
            position: relative;
        }
 
        .level-warn-wrap {
            width: 120px;
            height: 220px;
            position: absolute;
            left: 0;
            overflow: hidden;
        }
        ul {
            width: 120px;
            position: absolute;
            top: 0;
            left: 0;
        }
 
        .level-warn li {
            width: 120px;
            height: 110px;
            float: left;
        }
    </style>
</head>
<body>
    <div class="level-warn" id="level-warn">
        <!-- 容器 -->
        <div class="level-warn-wrap">
            <ul>
                <li>
                    <div>1</div>
                </li>
                <li>
                    <div>2</div>
                </li>
                <li>
                    <div>3</div>
                </li>
                
            </ul>
        </div>
 
    </div>
    <script type="text/javascript">
        window.onload = function () {
            // 获取操作对象容器
            var box = document.getElementById("level-warn");
            // 获取容器一级子元素
            var children = box.getElementsByTagName('div');
            // 获取容器
            var wrap = getClass('level-warn-wrap');
            // 获取列表
            var ul = wrap.getElementsByTagName('ul')[0];
            // 获取各项
            var list = ul.getElementsByTagName('li');
            var i = 0;
            var num = 2;
            var time = 50;
            var toggle = -1;
            var timer = null;
            ul.innerHTML += ul.innerHTML;
            // 自动轮播
            console.log(list.length,'===list.length')
            list.length> 4 && autoPlay(toggle);
            // 自动轮播方法
            function autoPlay(toggle) {
                // 清除原有定时器
                if (timer) {
                    clearInterval(timer);
                };
                // 重新开启定时器
                timer = setInterval(function () {
                    // 增量
                    num += 2 * toggle;
                    // 向上走
                    if (Math.abs(num) > list.length * list[0].offsetHeight / 2) {
                        num = 0;
                    };
                    ul.style.top = num + 'px';
                }, time);
            };
            // 获取拥有当前样式的元素
            function getClass(name) {
                for (i = 0; i < children.length; i++) {
                    if (children[i].className == name) {
                        return children[i];
                    }
                }
            };
        };
    </script>
</body>
 
</html>