js实现跑马灯

<div class="carousel-title-inner">
     <span>{{item.title}}</span>
</div>

 .carousel-title-inner{
    width: 100%;
    position: absolute;
    left:50%;
    top: 50%;
    transform: translate(-50%,-50%);
    height: 10.4rem;
    overflow: hidden;
}
.carousel-box .carousel-title-inner span{
    white-space: nowrap;
    position: relative;
    left:0px;
}

let marqueeTimer;
scrollText(){
            clearInterval(marqueeTimer);
            let textBox = document.querySelector('.carousel-title-inner');
            let text = document.querySelector('.carousel-title-inner span');
            console.log(textBox,text)
            let textBoxWidth = textBox.offsetWidth;
            let textWidth = text.offsetWidth;
            if (textWidth > textBoxWidth) {  
                let stayTime = 1000;
                let endStay = true;
                marqueeTimer = setInterval(function(){
                    if (stayTime !== 0) {
                        stayTime = stayTime - 100;
                    } else {
                        let textLeft = parseInt(text.style.left.slice(0,-2));
                        if (textLeft > (textBoxWidth - textWidth)) {
                            text.style.left = (textLeft - 2) + 'px';
                        } else {
                            // 结尾处暂停2s;
                            if (endStay) {
                                endStay = false;
                                stayTime = 1000;
                                return;
                            }
                            // 回到开头位置时在开头位置停留2s;后再开始转
                            text.style.left = '0px'
                            stayTime = 1000;
                            endStay = true;
                        }
                    }
                },100);
            }
        }