轮播图（一）原生js

1.大框架，获取需要用到的html元素并定义js变量

window.onload=function () {    var container=document.getElementById('container');    var list=document.getElementById('list');    var buttons=document.getElementById('buttons').getElementsByTagName('span');    var prev=document.getElementById('prev');    var next=document.getElementById('next');}

2.增加：左右箭头点击事件。animate()

/*左右箭头点击*/function animate(offset) {          //offset为偏移量    list.style.left=parseInt(list.style.left)+offset;}//右箭头next.onclick=function () {    animate(-1075);}//左箭头 prev.onclick=function () {    animate(1075);}

3.无限滚动:需要两张辅助图片，位移到辅助图时及时归位。需要判断两张辅助图的位置范围。

function animate(offset) {          //offset为偏移量    list.style.left=parseInt(list.style.left)+offset;    if(list.style.left>-1075){        list.style.left=-5375+'px'    }      if(list.style.left<-5375){        list.style.left=-1075+'px'    }}//右箭头next.onclick=function () {    animate(-1075);}//左箭头 prev.onclick=function () {    animate(1075);}

优化：新增一个变量

function animate(offset) {          //offset为偏移量    var newLeft=parseInt(list.style.left)+offset;    list.style.left=newLeft+'px';    if(newLeft>-1075){        list.style.left=-5375+'px'    }    if(newLeft<-5375){        list.style.left=-1075+'px'    }}//右箭头next.onclick=function () {    animate(-1075);}//左箭头 prev.onclick=function () {    animate(1075);}

4.加上小圆点点亮事件

var index=1;//用来存放当前显示的是第几张图片，以确定点亮第几个小圆点

function showButton() {        buttons[index-1].className='on';//实际位置和数组位置差1}

在箭头点击事件中调用

//右箭头next.onclick=function () {    index+=1;    showButton();    animate(-1075);}//左箭头 prev.onclick=function () {    index-=1;    showButton();    animate(1075);}

在亮起下一个按钮之前，要关掉之前亮起的按钮。修改showButton()

function showButton() {      for(var i=0;i<buttons.length;i++){            if(buttons[i].className=='on'){//当属性值为“on”时，说明已经点亮。将其变为空，结束点亮                buttons[i].className='';                break;            }        }      buttons[index-1].className='on';    }

上述修改，默认index一直加或者一直减。当index超出5或者1时，小圆点不会亮，所以同样需要归位。大于5，归位到1；小于1，归位到5

next.onclick=function () {        if(index==5){            index=1;        }else {            index+=1;        }        showButton();        animate(-1075);}prev.onclick=function () {        if(index==1){            index=5;        }else {            index-=1;        }        showButton();        animate(1075); }

5.给按钮添加点击事件。不是相邻切换，可能有跳转切换，需要计算偏移

for(var i=0;i<buttons.length;i++){       buttons[i].onclick=function () {           var myIndex=parseInt(this.getAttribute('index'));//根据index的位置来绝对显示哪一张图片。因为index是自定义的属性，能用getAttribute()获取自定义属性。           var offset=-1075*(myIndex-index);           animate(offset);           index=myIndex;//切换到点击的index获取对应图片后，更新一下index值           showButton();//点亮更新后的按钮       }}

优化：连续点击相同的按钮，程序依然会跑一次，没有意义

for(var i=0;i<buttons.length;i++){       buttons[i].onclick=function () {           if(this.className=='on'){                   return;//优化           }//当点击同样的图片时，不执行代码       ...      }}

6.动态换图。增加animate（）的功能

function animate(offset) {        var newLeft=parseInt(list.style.left)+offset;        /*滑动切换*/        var time=300;//位移总时间        var interval=10;//位移间隔        var speed=offset/(time/interval);//每次的位移量        //判断是否开始移动，go()是animate()的内部函数        function go() {            if((speed<0&&parseInt(list.style.left)>newLeft)||(speed>0&&parseInt(list.style.left)<newLeft)){                list.style.left=parseInt(list.style.left)+speed+'px';                //没有达到目标值还需要继续调用go函数                setTimeout(go,interval);//10毫秒运行一次go函数,递归。每次只执行一次         }         //移动到了目标值            else {                list.style.left=newLeft+'px';                if(newLeft>-1075){                    list.style.left=-5375+'px';                }                if(newLeft<-5375){                    list.style.left=-1075+'px';                }            }        }      go();    }

优化：不断的点击箭头，图片不断切换，内存使用较多。需要做成：还在切换时不进行新一轮切换，切换完毕后再进行新的切换

用var animated=false;和var animated=true;调节

7.自动切换

//自动切换，设置一个定时器。每隔3秒,可以一直执行    function play() {        timer=setInterval(function () {            next.onclick();        },3000);    }    //需要停止    function stop() {        clearInterval(timer);    }

最后调用

//给容器加一个鼠标移出，移入事件，来决定是否自动播放    container.onmouseover=stop;    container.onmouseout=play;    play();

全部代码

HTML

<!--pics  slider start--><div class="pics" id="container">     <div id="list" style="left:-1075px">            <img src="img/Sliderpics/5.jpg">            <img src="img/Sliderpics/1.jpg">            <img src="img/Sliderpics/2.jpg">            <img src="img/Sliderpics/3.png">            <img src="img/Sliderpics/4.jpg">            <img src="img/Sliderpics/5.jpg">           <img src="img/Sliderpics/1.jpg">      </div>     <div id="buttons">           <span index="1" class="on"></span>           <span index="2"></span>           <span index="3"></span>           <span index="4" ></span>           <span index="5"></span>     </div><a href="javascript:;" id="prev" class="arrow">&lt;</a><a href="javascript:;" id="next" class="arrow">&gt;</a></div><!--pics  slider end-->

CSS

*{    margin: 0;    padding: 0;    list-style: none;}a{    text-decoration: none;}#container{    width: 1075px;/*图片尺寸*/    height: 600px;    /*border: 3px solid #333333;*/    overflow: hidden;/*溢出隐藏*/    position: relative;/*定位基准*/}#list{    width: 7525px;/*1075px×7=7525px*/    height: 600px;    position: absolute;/*定位*/    z-index: 1;}#list img{    float: left;}#buttons{    width: 100px;    height: 10px;    z-index: 2;/*按钮在list 上方*/    position: absolute;    bottom: 20px;    left: 450px;}#buttons span{    width: 10px;    height: 10px;    margin-right: 5px;    background: #333333;    border-radius:50% ;    cursor: pointer;    float: left;    border: 1px solid #fff;}#buttons .on{    background:  #A3C4E7;}.arrow{    width: 40px;    height: 60px;    line-height: 59px;    text-align: center;    font-size: 36px;    font-weight: bold;    display: none;/*默认先不显示*/    cursor: pointer;    position: absolute;    top: 300px;    background-color: rgba(0,0,0,.3);    color: #fff;    z-index: 2;}#container:hover .arrow{display: block;}.arrow:hover{    background:rgba(0,0,0,.7);}#prev{left: 20px;}#next{right: 20px}

JS

window.onload=function () {    var container=document.getElementById('container');    var list=document.getElementById('list');    var buttons=document.getElementById('buttons').getElementsByTagName('span');    var prev=document.getElementById('prev');    var next=document.getElementById('next');    var index=1;    var animated=false;    var timer;    //亮起小圆点    function showButton() {        for(var i=0;i<buttons.length;i++){            if(buttons[i].className=='on'){                buttons[i].className='';                break;            }        }        buttons[index-1].className='on';    }    //左右箭头点击    function animate(offset) {        animated=true;//优化        var newLeft=parseInt(list.style.left)+offset;        //滑动切换        var time=300;        var interval=10;        var speed=offset/(time/interval);//每次的位移量        //判断是否唯一        function go() {            if((speed<0&&parseInt(list.style.left)>newLeft)||(speed>0&&parseInt(list.style.left)<newLeft)){                list.style.left=parseInt(list.style.left)+speed+'px';                //继续调用go函数                setTimeout(go,interval);//10毫秒运行一次go函数,递归。每次只执行一次            }else {                animated=false;//优化                list.style.left=newLeft+'px';                //实现无限循环的判断                if(newLeft>-1075){                    list.style.left=-5375+'px';                }                if(newLeft<-5375){                    list.style.left=-1075+'px';                }            }        }      go();    }    //自动切换，设置一个定时器。每隔3秒,可以一直执行    function play() {        timer=setInterval(function () {            next.onclick();        },3000);    }    //需要停止    function stop() {        clearInterval(timer);    }    next.onclick=function () {        if(index==5){            index=1;        }else {            index+=1;        }        showButton();        if(!animated){//优化            animate(-1075);        }    }    prev.onclick=function () {        if(index==1){            index=5;        }else {            index-=1;        }        showButton();        if(!animated){//优化            animate(1075);        }    }    //按钮切换，图片随意跳转    for(var i=0;i<buttons.length;i++){       buttons[i].onclick=function () {           if(this.className=='on'){               return;//优化           }           var myIndex=parseInt(this.getAttribute('index'));           var offset=-1075*(myIndex-index);           animate(offset);           index=myIndex;           if(!animated){//优化               showButton();           }           debugger;       }    }    //给容器加一个鼠标移出，移入事件，来决定是否自动播放    container.onmouseover=stop;    container.onmouseout=play;    play();}