大图滚动效果

ps：图片大小200*200；
<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <title>大图滚动效果</title>
</head>
<style>
    body {
        background: skyblue;
    }
    .pic{
        width: 200px;
        height: 200px;
        margin: 50px auto;
        border: 1px red solid;
        overflow: hidden;
    }
    .imgs {
        width: 800px;
        height: 200px;
    }
    .imgs img {
        width: 200px;
        height: 200px;
        float: left;
    }
    .but {
        width: 350px;
        height: 50px;
        margin: 10px auto;
        border: 1px red solid;
        text-align: center;
    }
    .but span {
        font-size: 40px;
        padding-right: 15px;
        cursor: hand;
        cursor: pointer;
    }
    .select {
        color: red;
    }
</style>
<body>
    <div id="pic" class="pic">
        <div class="imgs">
            <img src="img/1.png" alt="">
            <img src="img/2.png" alt="">
            <img src="img/3.png" alt="">
            <img src="img/4.png" alt="">
        </div>
    </div>
    <div class="but" id="but">
        <span><--</span>
        <span class="select">1</span>
        <span>2</span>
        <span>3</span>
        <span>4</span>
        <span>--></span>
    </div>
    <!-- =================================================================================================================================== -->
    <script>
        var pic = document.getElementById('pic');
        var pics = pic.getElementsByTagName('img');
        var btns = document.getElementById('but').getElementsByTagName('span');
        var autoNum = 0;    //当前图片的索引值
        var imgWidth = 200; //图片宽度
        var time = null;    //第一个计时器，用于实现当前位置到新位置的运动过程
        var time2 = null;    //第二个计时器，用于实现多次滚动的发生
        window.onload = clock; //文档加载完成后，加载clock函数

        function moveTo(startPos,endPos){
            if(time){
                clearInterval(time);
            }
            var startPos = startPos;
            var endPos = endPos;
            var step = 0;
            var stepMax = 50;
            var everyStep = (endPos - startPos) / stepMax;
            time = setInterval(move,25);

            function move(){
                step++;
                pic.scrollLeft += everyStep;
                if(step == stepMax){
                    pic.scrollLeft = endPos;
                    clearInterval(time);
                }
            }
        }

        function autoMove(){
            autoNum++;
            if(autoNum == pics.length){
                autoNum = 0;
            }
            if(autoNum == -1){
                autoNum = pics.length - 1;
            }
            btncolor();
            moveTo(pic.scrollLeft,imgWidth * autoNum);
        }

        for(var i = 1;i < btns.length -1;i++){
            btns[i].onclick = function(){
                clearClock();
                for(var j = 1;j < btns.length - 1;j++){
                    if(this == btns[j]){
                        autoNum = j - 1;
                        btncolor();
                        moveTo(pic.scrollLeft,imgWidth * (j - 1));
                    }
                }
                clock();
            }
        }

        btns[0].onclick = function(){
            clearClock();
            autoNum -= 2;  //在autoMove中会加1，因此此处减2
            autoMove();
            clock();
        }

        btns[btns.length - 1].onclick = function(){
            clearClock();
            autoMove();
            clock();
        }

        function clock(){
            //需要大于1250，原因在moveTo函数中50*25=1250，否则会使计时器重复调用
            time2 = setInterval(autoMove,3000); 
        }

        function clearClock(){
            if(time2){
                clearInterval(time2);
            }
        }

        function btncolor(){
            //从1开始是因为有左键<--
            for(var k = 1;k < btns.length - 1;k++){
                btns[k].style.color = 'black';
            }
            btns[autoNum + 1].style.color = 'red';
        }
    </script>

</body>
</html>
效果图：