简单轮播图的实现及原理讲解（js）
0.最终效果预览
鼠标未触及区域时（自动滚动中）
鼠标触及区域后 （停止滚动，显示按钮）
基本功能
自动无缝滚动
左右按钮控制滚动
点击圆点切换图片
1.整体结构与思路
Html部分
<body><divid="parent"><divid="uls"><ulid="img_ul"><li><imgsrc="imgs/0.jpg"/></li><li><imgsrc="imgs/1.jpg"/></li><li><imgsrc="imgs/2.jpg"/></li><li><imgsrc="imgs/3.jpg"/></li><li><imgsrc="imgs/4.jpg"/></li></ul><ulid='litCir_ul'></ul></div><divid="buttons"><spanid="left"><</span><spanid="right">></span></div></div></body>
三个div，最外层id为parent的大div内包含了uls和buttons两个div，divuls中包含了两个列表img_ul（图片列表）, litCir_ul（小圆点列表），divbuttons里则包含了“左”， “右”两个按钮。
CSS部分
#parent{position:relative;margin:50px auto;padding:0;width:500px;height:309px;}#uls{position:relative;margin:0;padding:0;width:500px;height:309px;overflow:hidden;}#img_ul{position:absolute;margin:0;padding:0;left:0;top:0;width:3000px;/*多留出一张图片的宽度！*/list-style:none;}#img_ul li{float:left;margin:0;padding:0;width:500px;height:309px;}#img_ul li img{width:500px;height:309px;}#litCir_ul{position:absolute;margin:0;padding:0;right:10px;bottom:10px;list-style:none;}#litCir_ul li{margin:0;padding:0;float:left;width:20px;height:20px;text-align:center;line-height:20px;border-radius:50%;margin-left:10px;cursor:pointer;}li.active{background-color:white;}li.quiet{background-color:#1e90ff;}#buttons{margin:0;padding:0;display:none;}#buttons span{position:absolute;width:40px;height:40px;top:50%;margin-top:-20px;line-height:40px;text-align:center;font-weight:bold;font-family:Simsun;font-size:30px;border:1px solid #fff;opacity:0.3;cursor:pointer;color:#fff;background:black;}#left{left:5px;}#right{left:100%;margin-left:-45px;}
需要注意的地方
图片的宽，高度应和img_ul中的li标签， 以及div#parent， div#uls的宽，高度一致。
img_ul的宽度应为(图片数目+1）*每张图片的宽度。也就是要多留出一张图片的宽度（下一部分解释）。
div uls部分使用overflow:hidden隐藏img_ul超出的部分，确保每次该区域只能显示一张完整的图片。
2.功能实现（JS部分）
①将会在下面用到的Html中的对象和一些变量
/*获取HTML中的对象*/varparent=document.getElementById("parent");varimg_ul=document.getElementById("img_ul");varlitCir_ul=document.getElementById("litCir_ul");varbuttons=document.getElementById("buttons");varcLis=litCir_ul.children;varlen=img_ul.children.length;//图片张数varwidth=parent.offsetWidth;//每张图片的宽度varrate=15;//一张图片的切换速度， 单位为pxvartimes=1;//切换速度的倍率vargap=2000;//自动切换间隙， 单位为毫秒vartimer=null;//初始化一个定时器varpicN=0;//当前显示的图片下标varcirN=0;//当前显示图片的小圆点下标vartemp;
②添加小圆点
之所用js添加小圆点，是因为小圆点的数量是由图片张数决定的。
for(vari=0;i<len;i++){vara_li=document.createElement("li");a_li.className='quiet';litCir_ul.appendChild(a_li);}litCir_ul.children[0].className="active";
默认li的class为quiet, 第一张默认为active。
③无缝滚动是怎么实现的？
首先先理解该轮播图如何滚动，这里是通过控制img_ul的left值来控制显示某张图片， 为了实现“滚动”的效果，我们需要逐渐改变img_ul的left值，而不能直接使该值变化图片宽度的倍数。这里我们定义一个动画效果函数Roll()。
functionRoll(distance){//参数distance：滚动的目标点（必为图片宽度的倍数）clearInterval(img_ul.timer);//每次运行该函数必须清除之前的定时器！varspeed=img_ul.offsetLeft<distance?rate:(0-rate);//判断图片移动的方向img_ul.timer=setInterval(function(){//设置定时器，每隔10毫秒，调用一次该匿名函数img_ul.style.left=img_ul.offsetLeft+speed+"px";//每一次调用滚动到的地方 (速度为 speed px/10 ms) varleave=distance-img_ul.offsetLeft;//距目标点剩余的px值 /*接近目标点时的处理，滚动接近目标时直接到达， 避免rate值设置不当时不能完整显示图片*/if(Math.abs(leave)<=Math.abs(speed)){clearInterval(img_ul.timer);img_ul.style.left=distance+"px";}},10);}
试想下面的情况，当图片从最后一张切换到第一张时，这时就不能通过逐渐改变img_ul的left值来实现滚动的效果，于是克隆第一张图片至列表尾部，当滚动完最后一张图片时，继续滚动到克隆的第一张，然后将img_ul的left值置为0。
/*克隆第一个li到列表末*/img_ul.appendChild(img_ul.children[0].cloneNode(true));
④自动滚动
functionautoRun(){picN++;cirN++;if(picN>len){//滚动完克隆项后img_ul.style.left=0;//改变left至真正的第一项处picN=1;//从第二张开始显示}Roll(-picN*width);if(cirN>len-1){//判断是否到了最后一个圆点cirN=0;}for(vari=0;i<len;i++){cLis[i].className="quiet";}cLis[cirN].className="active";}
需要注意的是小圆点和图片列表的li数目是不一样的，当滚动到最后一个克隆项时，此时小圆点实际上在第一个位置。
开始自动滚动：
timer = setInterval(autoRun, gap);
⑤触及小圆点时切换至对应图片
for(vari=0;i<len;i++){cLis[i].index=i;cLis[i].onmouseover=function(){for(varj=0;j<len;j++){cLis[j].className="quiet";}this.className="active";temp=cirN;picN=cirN=this.index;times=Math.abs(this.index-temp);//距离上个小圆点的距离rate=rate*times;//根据距离改变切换速率Roll(-this.index*width);rate=15;}}
给每个小圆点绑定了onmouseover事件，这个方法有个细节，会根据两次小圆点的距离差调整速率为rate*times，使切换效果更自然（也就是说每次切换说花的时间基本一致，无论是第一张到第二张，还是第一张到最后一张）。
⑥触及轮播图区域和离开该区域时
parent.onmouseover=function(){clearInterval(timer);buttons.style.display='block';}parent.onmouseout=function(){timer=setInterval(autoRun,gap);buttons.style.display='none';}
触及区域，清除定时器，显示按钮。
离开区域，添加定时器，隐藏按钮。
⑦给两个按钮添加onclick事件
/*上一张*/buttons.children[0].onclick=function(){picN--;cirN--;if(picN<0){//滚动完第一项后img_ul.style.left=-len*width+"px";//改变left至克隆的第一项处picN=cirN=len-1;}Roll(-picN*width);//bug处理if(cirN<0){cirN=len-1;}for(vari=0;i<len;i++){cLis[i].className="quiet";}cLis[cirN].className="active";}/*下一张*/buttons.children[1].onclick=autoRun;
自动播放就是间隔一定时间不断调用函数“下一张”的过程，所以这里的按钮right下一张的实现就是上面的autoRun函数。
