简单的滚动li列表

简单的滚动li列表：

                <ul class="list-unstyled list-unstyled_new" id="autoScroll">
                    <li class="listli ">
                        <div class="list-li-box">
                            <div class="trafficSpan bottomItem-number">1</div>

                            <p class="itemp" style="color:white;">防尘措施造成扬尘现象防尘措施造成扬尘现象</p>

                        </div>
                    </li> 
                    <li class="listli ">
                        <div class="list-li-box">
                            <div class="trafficSpan bottomItem-number">2</div>

                            <p class="itemp" style="color:white;">防尘措施防尘措施造成扬尘现象造成扬尘现象</p>

                        </div>
                    </li>

                </ul>

   #autoScroll {
    position: absolute;
    margin: 0px;
    padding: 0px;
    top: 0px;
    width: 100%;
    height: 100%;
}
 #autoScroll li {
    margin: 0px;
    padding: 0px;
    position: relative;
    top: 0;
    left: 0;
    display: flex;
    justify-content: center;
    align-items: center;
}

 #autoScroll li .list-li-box{
    width: 100%;
} 

$(function() {
            // 列表内容滚动显示
            let count = 0;
            const liLength = $('#autoScroll').children('li').length;
            function autoScroll(): any {
                count++;
                if (count === liLength / 2) {
                    $('#autoScroll')
                        .children('li')
                        .clone()
                        .appendTo($('#autoScroll'));
                    console.log('length:' + $('#autoScroll').children('li').length);
                }
                if (count === liLength - 1) {
                    $('#autoScroll')
                        .children('li')
                        .slice(0, liLength)
                        .remove();
                    count = 0;
                    $('#autoScroll')
                        .children('li')
                        .css('top', 0);
                    console.log('length:' + $('#autoScroll').children('li').length);
                }
                $('#autoScroll')
                    .children('li')
                    .animate({ top: '-=60' }, 3000);
            }
            setInterval(function() {
                autoScroll();
            }, 3000);
        });

本人水平有限，如有错请指出，另外我想把这个滚动列表放在zorro的走马灯里，结果出现只有第一页swipper会滚动的情况。不得不换了css动画实现滚动，更精简了代码：

#autoScroll .li {
    animation-name: tip;
    animation-duration: 10s;
    animation-timing-function: linear;
    animation-iteration-count: infinite;
}
@keyframes tip {
    0% {
        transform: translateY(0px);
    }
    100% {
        transform: translateY(-300px);
    }
}
#autoScroll:hover .li {
    animation-name: none;
}

一句css就搞定了，还能划过时停止动画，也提醒了我能用css就用css吧哈哈哈