一个基于原生js的焦点图轮播插件，兼容IE7以上（IE6未测试），解析

该插件承接上一篇手记所写的完整版（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~)