轮播插件jQuery.powerSlide.js
1.jQuery.powerSlide.js如何诞生的？
本人所在的公司想做一款企业应用的BBS，希望页面绚丽一点，banner的轮播希望更加炫酷一点，并且最好有更多选择的余地。于是UI设计师仿照阿里云的banner，设计一个轮播的banner,这个轮播一屏显示三个图片，可以前进后退，自动轮播。本人在网上找了几天，始终没找到轮播可以一次轮播三张图的，市面上的最多的是轮播一张图。于是，本人写了一个简单的jQuery.powerSlider.js轮播插件。
2.jQuery.powerSlide.js的结构
先上代码的结构图：
（1） 先把powerSlide这个对象添加到jQuery对象中
（2）定义unit对象，这个对象主要是存储这个插件中的一些公共方法
（3）定义options对象，这个对象是默认的参数对象集合，里面主要是插件的默认参数
（4）最后是jQuery返回Dom对象的遍历，在遍历对象的回调函数中，执行轮播图的初始化。
3.轮播图初始化的原理
（1）获取轮播图容器的宽度，也就是轮播图视口的宽度
（2）在options中获取一屏需要显示图片的个数， 然后视口宽度除以这个数字，得到每个图片的宽度，从而计算滑动容器的宽度。
（3）然后计算每次需要移动的距离，移动的距离在正常情况下是移动一屏，但是最后一步，图片的个数除以视口要显示的个数不一定是整数，会有余数，因此，最后一步的移动距离是余数乘以每个图片的宽度。
（4）为了保证兼容性，滑动的容器的滑动主要是改变容器的left的值，再加上CSS3的动画属性
4.轮播图的效果
5.插件的使用方法
$("#banner").powerSlide({
showSlots: true,
step: 3, // 一屏显示的个数
autoPlay: true, //自动轮播
timeStamp: 2000, //轮播的间隔
data: [] // 传入的数据 包括图片 文字...
});
6.总结
以上就是powerSlide插件的简单介绍，具体的详情可以给我留言，这个插件还没有更新到github上面，需要的朋友可以留言。