该插件承接上一篇手记所写的完整版（roll滚动风格已添加）；
适用大部分项目需求，以后会添加touch事件，兼容移动端手指滑动事件
源码分析：
该插件的构造函数为：
//构造函数
function AjuanCarousel(ele,opt){
//接收用户传递的参数变量，并且防止用户不传递参数报错
options = opt || {};
this.boxEle = _a(ele); //主体DOM
this.click = options.click || DEFAULT.click; //事件名
this.fatherEleName = options.fatherEleName || DEFAULT.fatherEleName; //父元素标签名，默认ul元素，可以是class：'.class'，也可以使id: '.id'
this.sonEleName = options.sonEleName || DEFAULT.sonEleName; //子元素标签名，默认li元素
this.index = options.index || DEFAULT.index; //轮播初始值
this.speed = options.speed || DEFAULT.speed; //轮播频率
this.isAuto = options.isAuto || DEFAULT.isAuto; //是否自动滚动
this.isLoop = options.isLoop || DEFAULT.isLoop; //是否连续滚动
this.btn = options.btn; //按钮参数配置
this.trigger = options.trigger; //索引参数配置
this.mode = options.mode || DEFAULT.mode; //轮播风格
this.custom = options.custom || DEFAULT.custom; //轮播风格为自定义，参数配置
this.roll = options.roll || DEFAULT.roll; //轮播风格为滚动，参数配置
this.isPauseByHover = options.isStopByHover || DEFAULT.isStopByHover; //鼠标移动在主体上面，是否暂停滚动，默认true
this.isAllSonForEle = options.isAllSonForEle || DEFAULT.isAllSonForEle; //所有的元素参数名称是否属于主体DOM的子元素，默认为true
this.callback = options.callback; //每滚动一屏，回调函数
}主要目的是为了用户传递参数，根据用户的参数启用不同的轮播风格
当然你也可以不用传递任何参数
插件会默认一套默认参数
//默认参数
DEFAULT = {
click:'click', //事件名
fatherEleName: 'ul', //父元素标签名，默认ul元素，可以是class：'.class'，也可以使id: '.id'
sonEleName: 'li', //子元素标签名，默认li元素
index: 0, //轮播初始值，默认0
speed : 4000, //轮播频率，默认4000，单位ms
isAuto: true, //轮播是否自动滚动，可选(true | false)，默认为true
isLoop: true, //是否连续滚动，可选(true | false)，默认为true
mode:'display', //轮播图的风格，可选(display | custom | roll)，默认display，custom自定义，roll滚动
custom:{ //风格选择自定义的时候，该参数可用
active:'active' //风格样式默认class名为active
},
roll:{ //风格选择滚动的时候，该参数可用
width:0, //用户指定的宽度，number类型，没有默认值
height:0, //用户指定的高度，number类型，没有默认值
during:400, //轮播速度，默认400，单位ms
isAxisX:true //滚动方向，X轴
},
btn:{ //按钮配置信息
prevEleName: '', //元素标签名，可以是class：'.class'，也可以使id: '.id'
nextEleName: '' //元素标签名，可以是class：'.class'，也可以使id: '.id'
},
trigger:{ //索引配置信息
triEleName:'', //元素标签名，可以是class：'.class'，也可以使id: '.id'
sonEleTagName:'i', //元素标签名
sonEleClass:'', //元素标签的样式
active:'active' //元素标签高亮样式
},
isStopByHover:true, //鼠标移动在主体上面，是否暂停滚动，默认true
isAllSonForEle:true //所有的元素参数名称是否属于主体DOM的子元素，默认为true
};该插件暴露在外边四个接口，一个是init初始化，用来解除事件绑定、暂停轮播以及开始轮播
//原型，暴露一些操作接口
AjuanCarousel.prototype = {
//初始化方法
init: function () {
achieveData(this); //获取数据元素
onEvent(this); //绑定事件
isModFun(this); //判断轮播的风格
autoRun(this); //自动轮播
return this;
},
//解除事件绑定的方法
unEvent: function () {
unEvent(this);
return this;
},
//暂停滚动
pause: function(){
//清除定时器
if(this.temp) clearInterval(this.temp);
return this;
},
//滚动
paly:function(){
if(this.temp) clearInterval(this.temp);
autoRun(this); //自动轮播
return this;
}
};默认风格轮播代码：
//轮播二，custom风格
function runByCustom(that){
//判断当前页面和总数页面
if(that.index >= that.length) that.index = 0;
if(that.index < 0) that.index = that.length -1;
var css = that.custom.active;
//遍历页面
that.sonEleArr.each(function (index, item) {
//页面
var b = index == that.index;
if(b){
_a(item).addClass(css);
}else{
_a(item).removeClass(css);
}
//判断是否有索引容器
if(that.trigger) {
if(b){
_a(that.triSonEleArr[index]).addClass(that.triActive);
}else{
_a(that.triSonEleArr[index]).removeClass(that.triActive);
}
}
that.type = false;
//回调函数
that.callback && that.callback();
})
}滚动轮播代码部分：
//轮播三，滚动风格
function runByRoll(that){
var obj = {},
i = that.index;
//判断当前页面和总数页面
if(that.index >= that.length) i = 0;
if(that.index < 0){
i = that.length -1;
that.fatherEle[0].style[that.axis] = '-' + that.dir * that.length +'px';
that.index = that.length - 1;
}
//判断是否有索引容器
if(that.trigger) {
that.triSonEleArr.each(function (index, item) {
if(i == index){
_a(item).addClass(that.triActive);
}else{
_a(item).removeClass(that.triActive);
}
});
}
//移动轮播图
obj[that.axis] = -(that.index) * that.dir;//获取参数对象
//判断是否是jQuery
if(that.fatherEle.animate){
that.fatherEle.animate(obj,that.during, function () {
//进行判断
if(that.index >= that.length){
that.fatherEle[0].style[that.axis] = '-' + 0 + 'px';
that.index = 0;
}
that.type = false;
that.callback && that.callback();
})
}else{
//调用动画库
packMove(that.fatherEle[0], obj, {duration: that.during}, function () {
//进行判断
if(that.index >= that.length){
that.fatherEle[0].style[that.axis] = '-' + 0 + 'px';
that.index = 0;
}
that.type = false;
that.callback && that.callback();
});
}
}因为字数限制，完整源码就不再贴出来了
完整源码下载，以及完整的示例见：
https://github.com/Woshiajuana/Carousel
ps：源码都配有注释，有不懂的童鞋可以找我；
(做了这么多，就想要个赞而已:~O(∩_∩)O~)
随时随地看视频
