javascript：使用封装运动函数书写一个文字轮播效果（）

效果图：

 

html：

<div id="box">
        <ul id="ul">
            <li> 你问我死后回去哪里</li>
            <li> 有没有人爱你</li>
            <li> 世界已然将你抛弃</li>
            <li> 总爱对凉薄的人扯着笑脸</li>
            <li> 岸上人们脸上都挂着无关</li>
            <li> 人间毫无留恋</li>
            <li> 一切散为烟</li>
            <li>来不及 来不及</li>
            <li>你曾笑着哭泣</li>
            <li>来不及来不及</li>
            <li>你颤抖的手臂</li>
            <li>来不及来不及</li>
            <li>无人将你打捞起</li>
            <li>来不及来不及</li>
            <li>你明明讨厌窒息</li>
        </ul>
    </div>

 css：

 <style>
        * {
            margin: 0;
            padding: 0;
        }

        #box {
            width: 350px;
            height: 150px;
            background: #fff;
            border: 2px chocolate dashed;
            text-align: center;
            margin: 200px auto;
            overflow: hidden;
            position: relative;
            cursor: pointer;
        }

        #ul {
            position: absolute;
            top: 0;
        }

        ul>li {
            list-style-type: none;
            height: 150px;
            line-height: 150px;
            color: greenyellow;
            margin-left: 10px;
            font-size: 26px;
        }
    </style>

js：

<script>
    //  获取元素
    var box = document.getElementById('box')
    var ul = document.getElementById('ul')
    //  获取所有ul里面的li
    var ulis = ul.children
    //  声明一个变量当做定时器开关
    var timer
    //  声明一个变量记录索引
    var index = 0

    //  克隆索引为 0 的那个li，并且复制内容，然后放到ul里面
    ul.appendChild(ulis[0].cloneNode(true))

    //  页面加载事件
    window.onload = function () {
        //  设置2秒执行一次封装好的函数 并赋值给设置好的定时器开关
        timer = setInterval(fn, 2000)
    }

    //  设置鼠标移入事件
    box.onmousemove = function () {
        // 鼠标移入关闭定时器停止滚动
        clearInterval(timer)
    }

    //  设置鼠标移出事件
    box.onmouseout = function () {
        //  设置2秒执行一次封装好的函数 并赋值给设置好的定时器开关
        timer = setInterval(fn, 2000)
    }

    function fn() {
        //  页面加载一次，索引就进行一次自增
        index++
        //  判断当索引大于li的个数时
        if (index > ulis.length - 1) {
            //  ul 回到 初始位置
            ul.style.top = 0 + 'px';
            //  并且给索引重新赋值为 1
            index = 1;
        }
        //  调用运动函数（传入实参）,每加载一次页面就进行一次运动函数
        move(ul, 'top', -index * ulis[0].offsetHeight)
    }

    //  封装运动函数
    function move(dom, attr, target, cb) {
        clearInterval(dom.timer);
        dom.timer = setInterval(function () {
            if (attr == 'opacity') {
                var current = parseInt(getStyle(dom, "opacity") * 100);
            } else {
                var current = parseInt(getStyle(dom, attr));
            }
            var speed = target > current ? Math.ceil((target - current) / 10) : Math.floor((target - current) / 10);
            if (attr == 'zIndex') {
                var next = target;
            } else {
                var next = current + speed;
            }
            if (attr == 'zIndex') {
                dom.style.zIndex = target;
            } else if (attr == 'opacity') {
                dom.style.opacity = next / 100;
                dom.style.filter = 'alpha(opacity=' + next + ')';
            } else {
                dom.style[attr] = next + 'px';
            }
            if (next == target) {
                clearInterval(dom.timer);
                if (cb) {
                    cb();
                }
            }
        }, 20);
    }

    //  封装获取外部样式函数
    function getStyle(dom, attr) {
        if (window.getComputedStyle) {
            return window.getComputedStyle(dom, null)[attr]
        } else {
            return dom.currentStyle[attr]
        }
    }
</script>