汇集网上焦点轮播图的实现方式，自己试了下，不过鼠标悬浮停止动画和鼠标离开动画播放好像没生效，不太明白，最后两行代码中，为什么可以直接写stop和play。不用加括号调用函数么？求懂的大神指点！

所用知识点：

1.DOM操作

2.定时器

3.事件运用

4.Js动画

5.函数递归

6.无限滚动大法(可以用js实现一个假图的制作。不过说实话一直理解不了假图的作用原理)

<style>*{margin:0;padding:0;}a{text-decoration:none;}body{padding:20px;}#container{width:600px;/*这里600x400是图片的宽高*/height:400px;border:3pxsolid#333;overflow:hidden;/*隐藏溢出的图片，因为图片左浮动，总宽度为4200*/position:relative;}#list{width:4200px;/*这里设置7张图片总宽度*/height:400px;position:absolute;/*基于父容器container进行定位*/z-index:1;}#listimg{float:left;width:610px;}#buttons{position:absolute;height:10px;width:100px;z-index:2;/*按钮在图片的上面*/bottom:20px;left:250px;}#buttonsspan{cursor:pointer;float:left;border:1pxsolid#fff;width:10px;height:10px;border-radius:50%;background:#333;margin-right:5px;}#buttons.on{background:orangered;/*选中的按钮样式*/}.arrow{cursor:pointer;display:none;/*左右切换按钮默认先隐藏*/line-height:39px;text-align:center;font-size:36px;font-weight:bold;width:40px;height:40px;position:absolute;z-index:2;top:180px;background-color:RGBA(0,0,0,.3);color:#fff;}.arrow:hover{background-color:RGBA(0,0,0,.7);}#container:hover.arrow{display:block;/*当鼠标放上去容器上面就显示左右切换按钮*/}#prev{left:20px;}#next{right:20px;}</style>

<divid="container"><divid="list"><imgsrc="5.jpg"alt="1"/><imgsrc="1.jpg"alt="1"/><imgsrc="2.jpg"alt="2"/><imgsrc="3.jpg"alt="3"/><imgsrc="4.jpg"alt="4"/><imgsrc="5.jpg"alt="5"/><imgsrc="1.jpg"alt="5"/></div><divid="buttons"><spanindex="1"class="on"></span><spanindex="2"></span><spanindex="3"></span><spanindex="4"></span><spanindex="5"></span></div><ahref="javascript:void(0);"id="prev"class="arrow">&lt;</a><ahref="javascript:void(0);"id="next"class="arrow">&gt;</a></div>

<script>window.onload=function(){varcontainer=document.getElementById('container');varlist=document.getElementById('list');varbuttons=document.getElementById('buttons').getElementsByTagName('span');varnext=document.getElementById('next');varprev=document.getElementById('prev');varindex=1;varlen=5;//图片的数量varanimated=false;//用于判断切换是否进行varinterval=3000;//自动播放定时器的秒数，3秒vartimer;//定时器//切换动画functionanimate(offset){animated=true;//切换进行中vartime=300;//位移总时间varinteval=10;//位移间隔时间varspeed=offset/(time/inteval);//每次位移量varnewLeft=parseInt(list.style.left)+offset;vargo=function(){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(go,inteval);}else{animated=false;list.style.left=newLeft+'px';if(newLeft<-3000){list.style.left=-600+'px';}if(newLeft>-600){list.style.left=-3000+'px';}}}go();/*varnewLeft=parseInt(list.style.left)+offset;list.style.left=newLeft+'px';if(newLeft<-3000){list.style.left=-600+'px';}if(newLeft>-600){list.style.left=-3000+'px';}*/}//为按钮添加样式functionshowButton(){for(vari=0;i<buttons.length;i++){if(buttons[i].className=='on'){buttons[i].className='';break;}}buttons[index-1].className='on';}next.onclick=function(){if(animated){return;}if(index==5){index=1;}else{index+=1;}animate(-600);showButton();}prev.onclick=function(){if(animated){return;}if(index==1){index=5;}else{index-=1;}animate(600);showButton();}//通过循环为按钮添加点击事件for(vari=0;i<buttons.length;i++){buttons[i].onclick=function(){if(animated){return;}//当继续点击当前按钮的时候，不进行切换if(this.className=='on'){return;}//通过获取按钮标签的自定义属性Index得到索引值，再计算差值varmyIndex=parseInt(this.getAttribute('index'));//真正的偏移量varoffset=-600*(myIndex-index);animate(offset);index=myIndex;showButton();}//自动播放functionplay(){timer=setTimeout(function(){next.onclick();play();},interval)}functionstop(){clearTimeout(timer);}container.onmouseover=stop;container.onmouseout=play;play();}}</script>