写了个淡入淡出的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'

    });

});