使用js实现带有停顿效果的图片滚动（按钮控制）

DOCTYPE html>
html lang="en">
head>
    meta charset="UTF-8">
    title>无缝滚动2title>
    style>
    #warp{
        width: 1250px;
        height: 300px;
        overflow: hidden;
        margin:100px auto 0;
        overflow-x: auto;
    }
    #warp #con{
        width: 4000px;
        height: 300px;
        overflow: hidden;
    }
    #warp #con #box1{
         float: left;
         overflow: hidden;
    }
    #warp #con #box2{
         float: left;
         overflow: hidden;
    }
    #warp img{
        float: left;
        margin-right: 10px;
        width: 200px;
        height: 300px;
    }
    .btn{
        text-align: center;
        margin-top: 10px;
    }
    .btn button{
        font-size: 16px;
    }
    style>
head>
body>
    div id="warp">
        div id="con">
            div id="box1">
                img src="images/meinv1.jpg" alt="">
                img src="images/meinv2.jpg" alt="">
                img src="images/meinv3.jpg" alt="">
                img src="images/meinv4.jpg" alt="">
                img src="images/meinv5.jpg" alt="">
                img src="images/meinv6.jpg" alt="">
            div>
            div id="box2">div>
        div>
    div>
    div class="btn">
        button id="scrollL">>
        button id="scrollR">右滚>>button>
    div>
    script>
        var warp=document.getElementById('warp');
        var con=document.getElementById('con');
        var box1=document.getElementById('box1');
        var box2=document.getElementById('box2');
        var img=box1.getElementsByTagName('img')[0];
        var scrollL=document.getElementById('scrollL');
        var scrollR=document.getElementById('scrollR');
        var timer1=null,timer2=null,flage=1;
        box2.innerHTML=box1.innerHTML;
        max=box1.clientWidth;
        imgmax=img.clientWidth+10;
        function scrollLeft(){
            flage=1;
            clearInterval(timer1);
            timer1=setInterval(function(){
                warp.scrollLeft++;
                if (warp.scrollLeft>=max) {
                    warp.scrollLeft=0;
                }
                if(warp.scrollLeft%imgmax==0){
                    clearInterval(timer1);
                    clearTimeout(timer2);
                    timer2=setTimeout(function(){
                        timer1=setInterval(scrollLeft,5)
                    },2000)
                }
            },5)
        }
        function scrollRight(){
            flage=0;
            clearInterval(timer1);
            timer1=setInterval(function(){
                warp.scrollLeft--;
                if (warp.scrollLeft0) {
                    warp.scrollLeft=max;
                }
                if(warp.scrollLeft%imgmax==0){
                    clearInterval(timer1);
                    clearTimeout(timer2);
                    timer2=setTimeout(function(){
                        timer1=setInterval(scrollRight,5)
                    },2000)
                }
            },5)
        }
            scrollLeft();
        scrollL.onclick=function(){
            // clearInterval(timer1);
            // clearTimeout(timer2);
            scrollLeft();
        }
        scrollR.onclick=function(){
            // clearInterval(timer1);
            // clearTimeout(timer2);
            scrollRight();
        }
        warp.onmouseenter=function(){
            clearInterval(timer1);
            clearTimeout(timer2);
        }
        warp.onmouseleave=function(){
            clearInterval(timer1);
            clearTimeout(timer2);
            console.log(flage);
            if (flage) {scrollLeft();}
               else{scrollRight();}    
        }
    script>
body>
html>

这种效果的具体效果是鼠标移上去滚动停止，移出滚动，滚动时是一张一张图片的滚动，即滚动一张之后停2s开始滚动下一张，具体内容请大家参考代码。