jquery 图片切换插件（初版）

最近由于工作需要，需要用到图片切换，所以写了一个图片切换插件，本人对jQuery不熟，所以也练习一下，插件的内容还没有最终完善，后续开发中。。。

/**
 * 图片轮播插件
 * @param {Object} options
 */
(function($){
    $.fn.carousel = function(options){
        var defaults = {
            container_width : 800,     //容器宽度
            container_height: 280,    //容器高度
            container_overflow: 'hidden',    //容器溢出是否显示
            container_position: 'relative',    //容器的布局为相对布局
            container_elem_count: 4,        //容器元素个数
            container_elem_arr: [],            //图片地址            
            duration : 1000,    //划动持续时间
            pause: 3000,        //两次划动间隔时间
            index: 0,    //图片索引
            auto: true,    //是否自动播放
            autoOrientation: "left",    //自动滑动的方向
            picTimer: ""    //定时器对象
        };
        options = $.extend({}, defaults, options||{});
        var _this = $(this);
        var _this_attrs = ["width", "height", "overflow", "position"];
        var _this_attrValues = [options.container_width, options.container_height, options.container_overflow, options.container_position];
        //添加属性
        addAttr(_this, _this_attrs, _this_attrValues);
        //创建子元素
        createElem(_this, options.container_elem_count, options.container_elem_arr);
        //为滑动对象添加宽度和位置属性
        addAttr($("ul", _this), ["width", "position"], [options.container_width*options.container_elem_count, "absolute"]);
        addAttr($("ul li", _this), ["width", "position", "float"], [options.container_width, "relative", "left"]);
        //_this.hover(function(){
        //    options.auto = false;
        //    autoMove();
        //}, function(){
        //    options.auto = true;
        //    autoMove();
        //});
        //注册滑动事件
        _this.delegate(".next", "click", function(e){
            next(_this.find("ul:first"), options.duration);
        })
        _this.delegate(".pre", "click", function(e){
            pre(_this.find("ul:first"), options.duration);
        })
        //创建滑动对象
        var startPosition = endPosition = 0;
        $(".slider", _this).slider({
            animate: options.duration,
            min: 0,
            max: options.container_width*(options.container_elem_count-1),
            slide: function(event, ui){
                endPosition = parseInt(ui.value);
                var dis = endPosition - startPosition;
                $("ul:first", _this).css("left", -endPosition);
                $(".slide").text(parseInt(ui.value));
            },
            start: function(event, ui){
                startPosition = parseInt(ui.value);
            },
            stop: function(event, ui){
                endPosition = parseInt(ui.value);
                if(ui.value % options.container_width != 0){
                    options.index = parseInt(endPosition/options.container_width) + 1;
                    //alert(options.index);
                    moveTo(_this.find("ul:first"), options.index, options.duration);
                }
                $(".slider", _this).slider("value", (options.index)*options.container_width);
                $(".stop").text(ui.value);
            }
        });
        /**
         * 创建元素
         * 
         * @param parentNode 父节点
         * 
         * @param elem_count 图片个数
         * 
         * @param elem_Arr 图片地址
         */
        function createElem(parentNode, elem_count, elem_Arr){
            if(!(parentNode instanceof jQuery)){
                //转化为jQuery对象
                parentNode = $(parentNode);
            }
            if(typeof(elem_count) != 'number'){
                elem_count = parseInt(elem_count, 10);
            }
            var $ul = $("<ul></ul>");
            for(var i = 0; i < elem_count; i++){
                var $li = $("<li><a href='#'><img src='" + elem_Arr[i] + "'></a></li>");
                $ul.append($li);
            }
            parentNode.append($ul);
            var $btnBg = $("<div class='btnBg' style='opacity: 0.5'></div>");
            parentNode.append($btnBg);
            var $btn = $("<div></div>")
                            .attr("class", "btn slider")
                            //.append("<span class='slider' style='opacity: 1; position: relative;'></span>");
            parentNode.append($btn);
            var  $preDiv = $("<div></div>")
                                .attr("class", "preNext pre")
                                .css("opacity", 0.2);
            parentNode.append($preDiv);
            $preDiv = $("<div></div>")
                            .attr("class", "preNext next")
                            .css("opacity", 0.2);
            parentNode.append($preDiv);
        }
        /**
         * 为元素添加css属性
         * 
         * @param obj 元素
         * 
         * @param attrs 属性名列表
         * 
         * @param attrValues 属性值列表
         */
        function addAttr(obj, attrs, attrValues){
            if(attrs.length > attrValues.length){
                attrValues = $.extend(new Array[attrs.length], attrValues);
            }
            for(var i = 0; i < attrs.length; i++){
                obj.css(attrs[i], attrValues[i]);
            }
        }
        /**
         * 为元素绑定事件
         * 
         * @param obj 事件源
         * 
         * @param eType 事件类型
         * 
         * @param handler 事件处理函数
         */
        function setEvent(obj, eType, handler){
            $(document).delegate(obj, eType, handler);
        }
        
        /**
         * 图片滑动函数
         * 
         * @param moveObj 滑动对象
         * 
         * @param index 图片索引
         * 
         * @param 滑动持续时间
         */
        function moveTo(moveObj, index, duration){
            var distance = -index*options.container_width;
            moveObj.stop(true,false).animate({"left" : distance}, duration);
        }
        /**
         * 向前滑动
         * 
         * @param moveObj 滑动对象
         * 
         * @param duration 动画持续时间
         */
        function next(moveObj, duration){
            options.index += 1;
            options.index = options.index % options.container_elem_count;
            if(moveObj instanceof jQuery){
                moveTo(moveObj, options.index, duration);
            }else{
                moveTo($(moveObj), options.index, duration);                
            }
        }
        /**
         * 向后滑动
         * 
         * @param moveObj 滑动对象
         * 
         * @param duration 动画持续时间
         */
        function pre(moveObj, duration){
            options.index -= 1;
            if(options.index < 0){
                options.index = options.container_elem_count - 1;
            }
            if(moveObj instanceof jQuery){
                moveTo(moveObj, options.index, duration);
            }else{
                moveTo($(moveObj), options.index, duration);                
            }
        }
        /**
         * 自动滑动
         */
        function autoMove(){
            if(options.auto){
                if("left" == options.autoOrientation){
                    next(_this.find("ul:first"), options.duration);    
                    options.picTimer = setTimeout(autoMove, options.pause);
                }
                if("right" == options.autoOrientation){
                    pre(_this.find("ul:first"), options.duration);    
                    options.picTimer = setTimeout(autoMove, options.pause);
                }
            }else{
                if(options.picTimer){
                    //alert(1);
                    clearTimeout(options.picTimer);
                }
            }
        }
        //setTimeout(autoMove, options.duration);
        //autoMove();
    };
})(jQuery);