循环滚动播放实现原理

一、定义：循环滚动播放，就是当有多条内容需要展示时，将目标内容以滚动的方式依次展示出来。当最后一条展示完毕后，接着就继续从第一条开始展示，如此循环往复。

二、最终实现效果。

三、过程分析。

原理图如下：

• 状态1到状态2，需要将绿色盒子整体向上移动一行的距离，可以通过改变绿色盒子的transform属性来改变位置，设置transition-duration属性来控制向上移动的时间。
• 状态2到状态3，需要将绿色盒子的第一个子节点迁移到最后面，变成最后一个子节点。而此时绿色盒子的位置，也就是transform属性需要重置到原始状态了。此时应注意，重置transform属性之前，应该将transition-duration属性设置为0s，避免肉眼可以观察到其移动过程。
• 状态3到状态4，可以类比为状态1到状态2；状态4到状态5，可以类比为状态2到状态3。以此类推。

四、代码实现

html部分

<div id="swiper-container">
    <div id="swiper-wrapper">
        <div>1</div>
        <div>2</div>
        <div>3</div>
        <div>4</div>
        <div>5</div>
    </div>
</div>

scss部分

#swiper-container {
    height: 3.5rem;
    margin-top: 5rem;
    font-size: 3rem;
    overflow: hidden;
    #swiper-wrapper {
        transition-duration: 0.5s;
        & > div {
            height: 3.5rem;
            text-align: center;
        }
    }
}

js部分

setInterval(function () {
        let swiperDom = document.getElementById("swiper-wrapper")
        swiperDom.style.transitionDuration = ".5s"
        swiperDom.style.transform = "translateY(-3.5rem)"
        setTimeout(function () {
            let firstChild = swiperDom.firstChild
            firstChild.remove()
            swiperDom.appendChild(firstChild)
            swiperDom.style.transitionDuration = "0s"
            swiperDom.style.transform = "translateY(0)"
        }, 500)
}, 2000)