一：大概思路
1. 先吧图片恒方在中央，然后一字排开，第一张图片（下标为0的图片）放在显示框内其余的用 overflow: hidden; 隐藏。
2. 然后用定时器使图片自己移动，在连接两边按钮左右移动。如果图片到了下标为0的图片则从下标为5的图片从后网前播放，（如上）
3.在用小圆点连接图片，下标为0的连接第一个小圆点一直网下。到那张图片他对应的小圆点亮。
二：实操
1. 因为英语啥的不太好，所以简单的东西就不敲了。（如html。css。定义变量啥的）
2.因为图片执行到0或5就没了所以吧它克隆一个在放过来。
克隆步骤：var length = imageLis.length;
魔术手操作：imageUL.appendChild(imageLis[0].cloneNode(true));
3.右边按钮的处理
function rightBtnHandler(){
函数截流：截取目标函数
if(m_unit.isanimated) return;
信号量的变化
idx++;
改变小圆点
changeCircles();
轮播图运动机构的移动。
animate(m_unit,{"left" : -options.width * idx},options.animatetime,options.tween,function(){
if(idx > length - 1){
idx = 0;
m_unit.style.left = "0px";
}
});
}
4.左按钮（相反）
5.小圆点的运动
小圆点的监听
for (var i = 0; i < circlesLis.length; i++) {
circlesLis[i].index = i;
circlesLis[i].onclick = function(){
信号量就是自己的序号
idx = this.index;
拉动
animate(m_unit,{"left" : -options.width * idx},options.animatetime,options.tween);
改变小圆点
changeCircles();
}
}
function changeCircles(){
idx可能是5，但是我们的小圆点下标最大是4，所以用n过渡一下：
var n = idx > length - 1 ? 0 : idx;
排他
for (var i = 0; i < circlesLis.length; i++) {
circlesLis[i].className = "";
}
circlesLis[n].className = "cur";
}
