js 无缝滚动

<style>
    *{padding:0; margin: 0; list-style: none;}
    .warp{margin: 100px 0; height: 300px; padding: 50px;}
    .div2 .div3{width: 550px; height: 100px; position: relative;overflow: hidden;transition:none;background: #c00;}
    .div2 ul{width: 1100px; margin: 0;padding: 0;position: absolute;left: 0;top: 0;transition:none;background: green;}
    .div2 li{float:left;list-style: none;margin: 0 10px 0 0;padding: 0;width: 100px;height: 100px;border: 0px double red;background: #efefef;line-height: 100px;font-size: 32px;text-align: center;cursor: pointer;}
</style>

<div class="warp">
    <div class="div2">
        <button class="btn btn-info">向左滚动</button> <button class="btn btn-info">向右滚动</button>
        <br><br>
        <div class="div3">
            <ul>   
                <li>1</li><li>2</li><li>3</li><li>4</li><li>5</li>
                <li>1</li><li>2</li><li>3</li><li>4</li><li>5</li>
            </ul>
        </div>
    </div>
</div>

<script>
    var adiv = document.querySelector(".div2");
    var abtn = adiv.getElementsByTagName("button");    
    var bdiv = adiv.querySelector(".div3");
    var aul = bdiv.getElementsByTagName("ul")[0];     
    var ali = aul.getElementsByTagName("li");     
    var anim1 = null;
    var anim2 = null;
    var speed1 = -2;
    var speed2 = 2;

    aul.innerHTML = aul.innerHTML+aul.innerHTML;  //复制一份ul的innerHTML
    aul.style.width = aul.offsetWidth*2+'px';    //修改ul的宽度

    function timer(){
        if(aul.offsetLeft < -aul.offsetWidth/2){
            aul.style.left = 0;
        }else if(aul.offsetLeft>0){
            aul.style.left =- aul.offsetWidth/2+'px';
        }
    }

    abtn[0].onclick = function(){
        clearInterval(anim2);
        anim1 = setInterval(function(){
            aul.style.left = aul.offsetLeft+speed1+"px";
            timer();
        },30)
    } 

    abtn[1].onclick = function(){
        clearInterval(anim1);
        anim2 = setInterval(function(){
            aul.style.left = aul.offsetLeft+speed2+"px";
            timer();
        },30)
    }


</script>

效果图