js实现图片左右移动轮播

实现效果:
1.图片能够自动轮播.
2.移入图片时自动轮播停止,并且有左右两个箭头.
3.图片下方有一排按钮,可以点击进行切换，并且按钮的样式也随之切换.

代码如下:
html+css:

*{
            margin: 0;
            padding: 0;
        }
        html,body{
            width: 100%;
        }
        .container{
            position: absolute;
            top: 50%;
            left: 50%;
            transform: translate(-50%,-50%);
            width: 800px;
            height: 500px;
            overflow: hidden;
        }
        .list{
            position: absolute;
            width: 5600px;
            height: 500px;
            z-index: 1;
        }
        .list img{
            float: left;
            width: 800px;
            height: 500px;
        }
        .buttons{
            position: absolute;
            left: 50%;
            bottom: 20px;
            margin-left: -90px;
            width: 180px;
            text-align: center;
            cursor: pointer;
            z-index: 2;
        }
        .buttons span{
            display: inline-block;
            width: 20px;
            height: 20px;
            margin-right: 5px;
            border-radius: 50%;
            background: #aaa;
            border: 1px solid #fff;
        }
        .buttons span:last-child{
            margin-right: 0;
        }
        .buttons .on{
            background: #000;
        }
        .arrow{
            display: none;
            position: absolute;
            top: 230px;
            width: 40px;
            height: 40px;
            background: rgba(0,0,0,0.4);
            font-size: 40px;
            font-weight: bold;
            text-align: center;
            cursor: pointer;
            color: #fff;
            z-index: 2;
        }
        .container:hover .arrow{
            display: block;
        }
        #pre{
            left: 0;
        }
        #next{
            right: 0;
        }

js:

(function shuff(){
        function $(id) {
            return document.getElementById(id);
        }
        /*index是为了确定当前图层坐标,animated是为了使运动过程中的点击失效*/
        var list=$("list"),
            pre=$("pre"),
            next=$("next"),
            index=1,
            animated=true,
            timer,
            button=$("buttons"),
            buttons=$("buttons").getElementsByTagName("span"),
            container=$("container");
         /*
         *运动函数
         *time为图层转换一次的时间
         */
        function animate(len) {
            animated=false; 
            var newLeft=parseInt(list.style.left)+len;
            var time=300;
            var interval=10;
            var speed=len/(time/interval);
            (function move(){
                if ((speed>0&&parseInt(list.style.left)<newLeft)||(speed<0&&parseInt(list.style.left)>newLeft)) {
                    list.style.left=parseInt(list.style.left)+speed+"px";
                    setTimeout(move,interval);
                }else{
                    list.style.left=newLeft+"px";
                    if (newLeft>-800) {
                        list.style.left=-4000+"px";
                    }
                    if (newLeft<-4000) {
                        list.style.left=-800+"px";
                    }
                    animated=true;
                }
            })();
        }
        /*按钮点击样式变化*/
        function showButton(){
            for(var i=0;i<buttons.length;i++){
                buttons[i].className="";
            }
            buttons[index-1].className="on";
        }
        /*按钮点击函数*/
        function buttonListen(){
            if (!animated) {
                return;
            }
            var spanIndex=parseInt(this.getAttribute("index"));
            var diff=spanIndex-index;
            animate(diff*(-800));
            index=spanIndex;
            showButton();
        }
        /*自动轮播函数*/
        function play(){
            timer=setInterval(function(){
                nextListen();
            },3000);
        }
        /*暂停轮播函数*/
        function suspend(){
            clearInterval(timer);
        }
        /*左箭头点击函数*/
        function preListen(){
            if (!animated) {
                return;
            }
            if (index==1) {
                index=5;
            }else{
                index--;
            }
            animate(800);
            showButton();
        }
        /*右箭头点击函数*/
        function nextListen(){
            if (!animated) {
                return;
            }
            if(index==5){
                index=1;
            }else{
                index++;
            }
            animate(-800);
            showButton();
        }
        function start(){
            container.addEventListener('mouseenter',suspend,false);
            container.addEventListener('mouseleave',play,false);
            button.addEventListener('click',function(event){
                if (event.target&&event.target.tagName.toLowerCase()=="span") {
                        buttonListen.call(event.target);
                }
            },false);
            pre.addEventListener('click',preListen,false);
            next.addEventListener('click',nextListen,false);
            play();
        }   
        start();
    })();

思路：
1.为了左右移动轮播顺畅，所以第一张图前插上最后一张图,最后一张图插上第一张图.让所有图片float:left;每张图片的宽度设置为800;最外层为一个id为container的容器,设置它的宽为800,overflow:hidden;水平垂直居中.

2.animate(len)是运动函数,先计算出当前list的left值,time为滑过一张图总共所需的时间,interval是滑过一张图时每次滑动的时间,speed为每次移动的距离,当移动的距离小于len时，setTimeout(move,interval);当left距离小于4000时,图片回到原位.

function animate(len) {
            animated=false; 
            var newLeft=parseInt(list.style.left)+len;
            var time=300;
            var interval=10;
            var speed=len/(time/interval);
            (function move(){
                if ((speed>0&&parseInt(list.style.left)<newLeft)||(speed<0&&parseInt(list.style.left)>newLeft)) {
                    list.style.left=parseInt(list.style.left)+speed+"px";
                    setTimeout(move,interval);
                }else{
                    list.style.left=newLeft+"px";
                    if (newLeft>-800) {
                        list.style.left=-4000+"px";
                    }
                    if (newLeft<-4000) {
                        list.style.left=-800+"px";
                    }
                    animated=true;
                }
            })();
        }

3.创建animated的目的是当图片移动时,点击下方按钮和左右移动按钮无效.index是为了记录当前图片的索引,在每一个span按钮上也设置了index属性.在buttonListen函数中写入showButton()来渲染按钮.

function buttonListen(){
            if (!animated) {
                return;
            }
            var spanIndex=parseInt(this.getAttribute("index"));
            var diff=spanIndex-index;
            animate(diff*(-800));
            index=spanIndex;
            showButton();
        }

4.nextListen()为右箭头点击事件,每调用一次,index++,animate(-800),向右移动800,当index=5时,将index重置为1,并且也要调用showButton()对按钮进行渲染.
5.play()函数内创建一个setInterval,不间断调用nextListen,达到无限向右自动轮播的效果.