JS动画实现跑马灯

基于JS动画实现无缝滚动的跑马灯

html+css

<div class="showBox">
    <ul class="wrapper">
        <li>1</li>
        <li>2</li>
        <li>3</li>
        <li>4</li>
        <li>5</li>
        <li>6</li>
        <li>7</li>
        <li>8</li>
        <li>9</li>
    </ul>
</div>

       .showBox {
            position: relative;
            margin: 20px auto;
            width: 500px;
            height: 100px;
            border: 1px solid green;
            overflow: hidden;
        }

        .wrapper {
            position: absolute;
            top: 0;
            left: 0;
            width: 900px;
            height: 100px;
        }

        .wrapper li {
            float: left;
            width: 100px;
            height: 100px;
            line-height: 100px;
            text-align: center;
            font-size: 20px;
        }

        .wrapper li:nth-child(3n+1) {
            background: lightblue;
        }

        .wrapper li:nth-child(3n+2) {
            background: lightcyan;
        }

        .wrapper li:nth-child(3n+3) {
            background: lightpink;
        }

让wrapper每间隔一段时间（最优动画时间是13~17MS）在原有的LEFT值基础上减去步长（想让动画快一些，步长就大一点）

过程：

1.把wrapper中原有的LI整体克隆一份放到容器的末尾（无缝滚动），并重新设置宽度

2.基于定时器实现动画

• 获取当前wrapper的left值，减去步长，把最新的left赋值给元素即可
• 实现无缝:当我们ul距离showBox的左偏移已经是整个wrapper的一半宽度(第一组原始内容已经运动完成了，即看到的是克隆后的)，此时让wrapper立即运动到left为零的位置即可

javaScript

let wrapper = document.querySelector('.wrapper')
      
wrapper.innerHTML += wrapper.innerHTML

wrapper.style.width = parseFloat(window.getComputedStyle(wrapper).width) * 2 + 'px'

setInterval(() => {
    let curL = parseFloat(window.getComputedStyle(wrapper).left)
    curL -= 2
    wrapper.style.left = curL+'px'

    if (Math.abs(wrapper.offsetLeft) >= parseFloat(window.getComputedStyle(wrapper).width) / 2) {
        wrapper.style.left = 0+'px' //=>立即回到起始的位置
    }
}, 17)