原生JS实现无缝滚动

js代码：

var scroll = document.getElementById('scrollCont');
    var soul = scroll.getElementsByTagName('ul')[0];
    var aList = soul.getElementsByTagName('li');
    var prev = document.getElementById('prevs');
    var next = document.getElementById('nexts');
    var speed = 2;
    soul.innerHTML += soul.innerHTML;
    soul.style.width = aList[0].offsetWidth * aList.length + 'px';
    function carouselScroll() {
        
        if (soul.offsetLeft < -soul.offsetWidth / 2) {
            soul.style.left = '0';
        }
        if (soul.offsetLeft > 0) {
            soul.style.left = -soul.offsetWidth / 2 + 'px';
        }
        soul.style.left = soul.offsetLeft - speed + 'px';
    }
    
    var timer = setInterval(carouselScroll, 30);
    
    scroll.onmouseover = function () {
        clearInterval(timer)
    }
    scroll.onmouseout = function () {
        timer = setInterval(carouselScroll, 30);
    }

    prev.onclick=function (){
        speed = 2;
    }
    next.onclick=function (){
        speed = -2;
    }

html结构：

 <div id="scroWrap">
        <a href="javascript:;" class="prev"  id="prevs"><img src="dpibleEeJianLeft.png" alt=""></a>
        <div id="scrollCont">
            <ul>
                <li><img src="doubleDiybg1.png" alt=""></li>
                <li><img src="doubleDiybg2.png" alt=""></li>
                <li><img src="doubleDiybg3.png" alt=""></li>
            </ul>
        </div>
        <a href="javascript:;" class="next" id="nexts"><img src="dpibleEeJianRight.png" alt=""></a>
    </div>