jQuery写一个淡入淡出的jq幻灯片插件

// 幻灯片插件 
// by ldp 
; 
(function () { 
 
    // 方法集合对象 
    var slider = { 
        // 初始化函数 
        init: function (options) { 
            return this.each(function () { 
                var $this = $(this); 
                var settings = $this.data('fadeSlider'); 
                var defaults; 
 
                if (typeof settings === 'undefined') { 
                    // 未定义配置，则启用默认设置 
                    defaults = { 
                        controlBtn: '.slider_control', // 控制按钮容器 
                        controlType: 'click', // 控制按钮触发事件 
                        autoAnim: true, // 自动播放 
                        intervalTime: 4000, // 播放间隔 
                        fadeInSpeed: 'slow', // 淡入时间 
                        fadeOutSpeed: 'normal', // 淡出时间 
                        LRBtns: false, // 是否启用左右按钮控制 
                        callback: null                   // 回调函数 
                    }; 
 
                    settings = $.extend({}, defaults, options); 
 
                    $this.data('fadeSlider', settings); 
                } else { 
                    // 否则，覆盖并继承默认参数 
                    settings = $.extend({}, defaults, options); 
                } 
 
                var $slder_con = $this.find('li'); 
                var $slder_btn = $(settings.controlBtn).find('li'); 
                var ctrlBtn = $(settings.controlBtn); 
 
                function checkCtrlBtn() { 
                    if (!ctrlBtn.length) { 
                        $this.after('<ul class="slider_control"></ul>'); 
                        ctrlBtn = $('.slider_control'); 
                        checkCtrlBtn(); 
                    } else { 
                        if (!$slder_btn.length) { 
                            ctrlBtn.append('<li class="on">1</li>'); 
                        } 
                        // 检查图像个数是否和按钮相等 
                        if ($slder_con.length > $slder_btn.length) { 
 
                            for (var i = 0, len = ($slder_con.length - $slder_btn.length); i < len; i++) { 
                                $slder_btn.parent().append('<li>' + ($slder_btn.length + i) + '</li>'); 
                                $slder_btn = ctrlBtn.find('li'); 
                            } 
                        } else if ($slder_con.length < $slder_btn.length) { 
 
                            for (var j = 0, len2 = ($slder_btn.length - $slder_con.length); j < len2; j++) { 
                                $slder_btn.last().remove(); 
                                $slder_btn = ctrlBtn.find('li'); 
                            } 
                        } else { 
                            return; 
                        } 
                    } 
                } 
 
                checkCtrlBtn(); 
 
                // 构造器 
                var SliderConstructor = function (container, controller) { 
                    this.controller = controller; 
                    this.container = container; 
                    this.timeId = null; 
                    this.num = 0; 
                    this.slider_len = controller.length; 
                    this.initEvents(); 
                }; 
 
                // 公用方法 
                SliderConstructor.prototype = { 
                    initEvents: function () { 
                        var _this = this; 
 
                        this.container.hide(); 
                        this.controller.removeClass('on'); 
 
                        if (settings.LRBtns) { 
                            this.createLRBtn(); 
                        } 
                        var leftBtn = $('#leftBtn'); 
                        var rightBtn = $('#rightBtn'); 
 
                        $this.on('mouseover',function () { 
                            //停止 
                            _this.stop(); 
                        }).on('mouseout',function () { 
                                _this.autoAnim(); 
                            }).mouseleave(); 
 
                        this.controller.on(settings.controlType,function () { 
                            _this.stop(); 
                            var num = _this.controller.index(this);    //获取当前控制按钮序号 
                            //其它图片淡出后，该序号相同的图片淡入 
                            if (!_this.container.is(':animated') && !$(this).hasClass('on')) { 
                                _this.fadeAnim(num); 
                            } 
                            if (settings.autoAnim) { 
                                _this.autoAnim(); 
                            } 
                        }).eq(0).trigger(settings.controlType); 
 
                        if (settings.callback !== null) { 
                            settings.callback.apply(window, this.num); 
                        } 
                    }, 
                    /** 
                     * 淡入淡出动画 
                     * @param {Number} i 
                     */ 
                    fadeAnim: function (i) { 
                        var _this = this; 
                        _this.num = i;      // 记录到num里面，相当于全局变量 
                        // 按钮状态变更 
                        this.controller.eq(_this.num).addClass("on").siblings().removeClass("on"); 
                        // 幻灯片淡入淡出 
                        this.container.removeClass('currentImg').fadeOut(settings.fadeOutSpeed).eq(_this.num).addClass('currentImg').fadeIn(settings.fadeInSpeed); 
                    }, 
                    /** 
                     * 自动播放 
                     */ 
                    autoAnim: function () { 
                        var _this = this;   // 避免setInterval中的this指向window 
                        _this.timeId = setInterval(function () { 
                            // 循环 
                            _this.num = (_this.num === _this.slider_len - 1) ? 0 : (++_this.num); 
                            _this.fadeAnim(_this.num); 
                        }, settings.intervalTime); 
                    }, 
                    /** 
                     * 停止播放 
                     */ 
                    stop: function () { 
                        var _this = this; 
                        clearInterval(_this.timeId); 
                    }, 
                    createLRBtn: function () { 
                        var _this = this; 
                        var LRBtnStr = '<a id="leftBtn" class="slide_ctrlBtn" href="javascript:">&lt;</a><a id="rightBtn" class="slide_ctrlBtn" href="javascript:">&gt;</a>'; 
 
                        this.container.parent().parent().append($(LRBtnStr)); 
 
                        var left = $('#leftBtn'), 
                            right = $('#rightBtn'); 
                        left.on('click', function () { 
                            _this.stop(); 
                            if (!_this.container.is(':animated')) { 
                                _this.num = (_this.num === 0) ? _this.slider_len - 1 : (--_this.num); 
                                _this.fadeAnim(_this.num); 
                            } 
                            _this.autoAnim(); 
                        }); 
                        right.on('click', function () { 
                            _this.stop(); 
                            if (!_this.container.is(':animated')) { 
                                _this.num = (_this.num === _this.slider_len - 1) ? 0 : (++_this.num); 
                                _this.fadeAnim(_this.num); 
                            } 
                            _this.autoAnim(); 
                        }); 
 
                        var width = left.width(); 
                        this.container.parent().parent().on({ 
                            'mouseenter': function (e) { 
                                    left.stop(false, true).animate({ 
                                        'left': 0 
                                    }, 400); 
                                    right.stop(false, true).animate({ 
                                        'right': 0 
                                    }, 400); 
                            }, 
                            'mouseleave': function (e) { 
                                    left.stop(false, true).animate({ 
                                        'left': -width + 'px' 
                                    }, 400); 
                                    right.stop(false, true).animate({ 
                                        'right': -width + 'px' 
                                    }, 400); 
                            } 
                        }); 
 
                    } 
                }; 
 
                var fSlider = new SliderConstructor($slder_con, $slder_btn); 
            }); 
        }, 
        /** 
         * 摧毁对象 
         * @param options 
         * @return {*|jQuery} 
         */ 
        destroy: function (options) { 
            return $(this).each(function () { 
                var $this = $(this); 
                $this.removeData('fadeSlider'); 
            }); 
        } 
    }; 
    $.fn.fadeSlider = function () { 
        // 第一个参数为slider对象的属性方法 
        var method = arguments[0]; 
        var args; 
 
        if (slider[method]) { 
            // 存在属性，取出第一个后面的其他参数 
            method = slider[method]; 
            args = Array.prototype.slice.call(arguments, 1); 
        } else if (typeof method === 'object' || !method) { 
            // 如果未定义method，则默认为init 
            method = slider.init; 
        } else { 
            // 否则抛出错误 
            $.error('Method ' + method + 'does not exist on jQuery.pluginName'); 
            return this; 
        } 
        // 调用第一个参数函数，并把后面的参数传入 
        return method.apply(this, args); 
    }; 
})(jQuery); 
 
// demo 
$(function () { 
    // 网站首页 
    $('ul.slider_container').fadeSlider('init', { 
        controlBtn: 'ul.b_slider_control', 
        controlType: 'click', 
        intervalTime: 6000, 
        fadeInSpeed: 650, 
        fadeOutSpeed: 1000 
    }); 
    $('ul.inBan_container').fadeSlider('init', { 
        controlBtn: 'ol.inBan_ctrls', 
        controlType: 'click', 
        intervalTime: 5000, 
        fadeInSpeed: 450, 
        fadeOutSpeed: 600, 
        LRBtns: true 
    }); 
 
    // 新闻首页 
    $('.newsSlider_wrap').fadeSlider('init', { 
        controlBtn: '.mewsS-control', 
        controlType: 'mouseover' 
    }); 
});