自动循环播放图片，下方有按钮可以切换到对应图片。
添加一个动画来实现图片切换。
鼠标停在图片上时，轮播停止，出现左右两个箭头，点击可以切换图片。
鼠标移开图片区域时，从当前位置继续轮播。
提供一个接口，可以设置轮播方向，是否循环，间隔时间。
点击查看demo
对HTML、CSS的要求：
<div> <div> <ul > <li><img src="https://www.jb51.net/img/carousel01.jpg" alt=""></li> <li><img src="https://www.jb51.net/img/carousel02.jpg" alt=""></li> <li><img src="https://www.jb51.net/img/carousel03.jpg" alt=""></li> <li><img src="https://www.jb51.net/img/carousel04.jpg" alt=""></li> <li><img src="https://www.jb51.net/img/carousel05.jpg" alt=""></li> <li><img src="https://www.jb51.net/img/carousel06.jpg" alt=""></li> </ul> </div> </div>
*必须是两个盒子嵌套，最里面的盒子需要有一个ul，图片需要被包含在li里。
*可以更改类名，同时将css文件中的相应类名替换即可。配置组件时传入正确的DOM元素即可。
*不限制图片宽度和数量，在css文件中更改数值即可。
/*需要更改的值*/ .carousel img{ width: 600px; height: 400px; } .carousel, .carousel-box { width: 600px; /*单张图片宽度*/ height: 400px; /*单张图片高度*/ } .carousel ul{ width: 3600px; /*单张图片宽度x图片数量*/ }
原理：
将所有图片横向排列，最外层容器和包裹容器设置overflow:hidden。最外层容器用于按钮和箭头的定位。利用包裹容器的scrollLeft属性控制显示哪张图片。
思路：
想要实现这些功能，应该有以下一些方法：
1.图片切换函数。接受一个参数，表示滚动方向。调用缓动函数切换图片。调用切换按钮图标函数点亮相应的按钮。
2.缓动函数。
3.点亮按钮函数。
4.初始化函数。用于绑定事件，创建按钮和箭头，初始化最初位置。
5.创建箭头函数。
6.创建按钮函数。
7.开始轮播函数。
8.轮播函数。
9.停止函数。用于停止轮播。
还有一些公用方法：
$()：选择DOM元素。
addClass(ele,"className")：给元素添加类名。
removeClass(ele,"className")：移除元素的类名。
$.add(ele,"type",fun)：给一个DOM节点绑定事件。
getCSS(ele,"prop")：获取元素相应属性的值。
$.delegateTag("selector","tagName","type",fun)：事件代理。
实现：
假设有6张图片，每张图片宽度为600px。按照功能的独立性来完成：
1.缓动函数 liner
缓动函数的作用是一点一点的改变目标元素的属性值，直到达到目标值。使用它的元素可能是水平轮播的图片，也可能是垂直轮播的图片，也可能是一个想从页面左端到达页面右端的小盒子。所以它应该接收四个参数（目标元素，要改变的属性值，目标值，移动次数）。
liner=function(ele,prop,next,num){ var speed=(next-ele[prop])/num, i=0; (function(){ ele[prop]+=speed; i++; if (i<num) { setTimeout(arguments.callee,30); } })(); },
2.点亮按钮函数 light
点亮按钮本质上就是给按钮添加一个active类，熄灭按钮就是给按钮移除active类。
那么如何知道当前按钮是哪一个呢？
最简单的方法是直接获取，所以可以给每个按钮添加一个index属性，当需要点亮按钮时，将要点亮的按钮的index传给这个函数即可。
那么如何知道要熄灭的按钮是哪一个呢？
最简单的方法也是直接获取，所以可以在作用域链末端添加一个变量active，记住当前亮着的按钮，这个函数直接将他熄灭就可以了。
light=function(index){ removeClass(active,"active"); active=$(this.wrapSelec+" "+"[index="+index+"]"); addClass(active,"active"); }
3.图片切换函数 go
需要计算出下一个scrollLeft的值：
如果是向左移动的话，scrollLeft应该-600，如果已经是0，就切换为3000.所以是ele.scrollLeft===0?width*(len-1):ele.scrollLeft-width;
如果是向右移动的话，scrollLeft应该+600，即0——>600,600——>1200，...，3000——>0。这里可以像上面那样用判断，也可以用一个公式next=(cur+distance)%(distance*num)。即(ele.scrollLeft+width)%(width*len)
需要获得下一个要被点亮的按钮的index：
和计算scrollLeft的思路一样，往左移动：index===0? len-1:index-1; 往右移动：(index+1)%len