公告栏文字无缝上下轮播

废话不多说，直接上代码

这是HTML代码

        

            
恭喜用户156****4111获得福袋1
            
恭喜用户162****2031获得福袋5
            
恭喜用户153****2120获得福袋2
            
恭喜用户152****4589获得福袋3
            
恭喜用户156****4111获得福袋5
            
恭喜用户152****6210获得福袋8
        

这是CSS代码(这个无关重要，主要父容器设置宽高加个溢出隐藏就行)

.my-btn {
    padding: 0;
    text-align: left;
    text-indent: 10px;
    cursor: pointer;
    opacity: 1;
    height: 2rem;
    line-height: 2.1rem;
    font-size: 17px;
}
.btn-light {
    background-color: #fff;
    color: #fe172d;
}

这是JS代码

 carousel2=()=>{                             //创造一个循环方法函数
        let _first = $('.div2 li:first'),       //获取列表第一个li
            _firstLi = _first.clone();          //复制第一个li
        $('.div2 li').eq(0).animate({"marginTop": "-=39px"}, 1000,function(){    //列表第一个添加动画，动画结束后删除第一个li，并将该li复制到最后面开始新的一轮循环
            _first.remove();
            $('.div2').append(_firstLi)
        })
    }
    setInterval('carousel2()',3000)              //三秒循环一次

下面是效果图

正在滚动.png

滚动完成.png

爱心发射biu.gif