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,达到无限向右自动轮播的效果.