详解JavaScript实现动态的轮播图效果

<div id="container"><div id="list" style="left: -600px;"> //设置图像的父级元素定位为向左600px，即是左移一个图片的宽度<img src="images/16.jpg" 蓝色代码表示的图片是相同的。这是因为每张图片都有向前和向后两种单击<img src="images/13.jpg" 事件，要使第一张图片向前单击显示第五张图片，就需要在其前方添加第五<img src="images/14.jpg" 张图片，避免在第一张图片单击向左时显示空白；同理，在第五张图片之<img src="images/15.jpg" 后也要添加第一张图片，使其实现平稳过渡<img src="images/16.jpg" style="margin: 0px; padding: 0px; outline: none; line-height: 25.2px; font-size: 14px; width: 660px; overflow: hidden; clear: both; font-family: tahoma, arial, "Microsoft YaHei";">	
*{margin: 0;padding: 0;text-decoration: none;} //设置所有元素的基本样式body{padding: 20px;}#container{position: relative; //设置最外层的div元素的定位为相对定位，即是相对与未设置定位之前的位置进行定位width: 600px;height: 400px;border: 3px solid #333;overflow: hidden; //设置容器的宽高，并将溢出部分设置为隐藏}#list{position: absolute; //设置图片所在的父级div的定位为绝对定位，即是相对于已定位的父级元素进行定位z-index: 1; //设置该div的显示层次width: 4200px; //该div是所有图片的父级元素，因此其宽高的设置应该包含所有的图片height: 400px;}#list img{float: left; //设置图片的显示的显示方式，为向左浮动width: 600px;height: 400px;}#buttons{position: absolute; //设置屏幕下方的所有圆点的定位方式，相对于容器元素进行绝对定位left: 250px; //距离父级已进行定位的元素的左侧距离为250pxbottom: 20px;z-index: 2; //设置圆点的显示层级为2，即是在图片div的上方height: 10px;width: 100px;}#buttons span{float: left;margin-right: 5px;width: 10px;height: 10px;border: 1px solid #fff;border-radius: 50%; //半径为50%，即是设置为圆点显示background: #333;cursor: pointer;}#buttons .on{background: orangered;}.arrow{position: absolute; //设置按钮的定位方式，即是相对与容器元素进行绝对定位top: 180px;z-index: 2;display: none;width: 40px;height: 40px;font-size: 36px;font-weight: bold;line-height: 39px;text-align: center;color: #fff;background-color: rgba(0,0,0,.3);cursor: pointer;}.arrow:hover{background-color: rgba(0,0,0,.7);}#container:hover .arrow{display: block;}#prev{left: 20px;}#next{right: 20px;}*/

window.onload=function(){var list=document.getElementById('list'); //获取图片元素的父级元素，并命名为listvar prev=document.getElementById('prev'); //获取左箭头var next=document.getElementById('next'); //获取右箭头function animate(offset){ //设置一个名为animate的函数，该函数接收一个参数var newleft=parseInt(list.style.left)+offset; //获取图片的父级元素的左侧的定位值，并加上传入的参数offsetif(newleft<-3000){ //图片的父级div在移动的过程中，显示的图片的定位都是负值，如图3所示list.style.left= -600+'px'; //但图片显示到五张图片上的最后一张时，自动跳转到第一张图片}else if(newleft>-600){ //当在第一张图片上单击向左的按钮时，自动跳转到最后一张list.style.left= -3000+'px';}else{list.style.left=newleft+'px';}}

prev.onclick=function(){ //向左的单击事件animate(600);}next.onclick=function(){ //向右的单击事件animate(-600)}var timer;function play(){timer=setInterval(function(){ //设置间歇调用，时间间隔为1500毫秒next.onclick() //此处是自动向右切换，如果想设置为向左切换，把next换为prev即可},1500)}play(); //实现自动调用var container=document.getElementById('container'); //获取最外层的容器元素function stop(){ clearInterval(timer);}container.onmouseover=stop; //当鼠标移动到上方时，清除定时器container.onmouseout=play; //当鼠标从容器元素上方移走时，进行自动轮播var buttons=document.getElementById('buttons').getElementsByTagName('span');var index=1;function buttonsShow(){for(var i=0;i<buttons.length;i++){if(buttons[i].className=='on'){ //如果某个span设置了class='on'，那么就将其的class属性设置为空buttons[i].className='';}}//数组从0开始，故index需要-1buttons[index-1].className='on'; //设置下一个span的class属性值为'on'，即是高亮显示}prev.onclick=function(){index-=1;if(index<1){index=5;}buttonsShow();animate(600);}next.onclick=function(){//由于上面定时器的作用，index会一直递增下去，而元圆点只有5个，因此需要先做出判断index+=1;if(index>5){index=1;}buttonsShow();animate(-600);}//点击任意一个小圆点就切换到所对应的图片for(var i=0;i<buttons.length;i++){(function(i){ //使用立即执行函数buttons[i].onclick=function(){var clickIndex=parseInt(this.getAttribute('index'));var offset=600*(index-clickIndex);animate(offset); //存放鼠标点击之后的位置，用于小圆点的正常显示index=clickIndex;buttonsShow();}})(i) } }