(function($) {
    $.fn.fade = function(o) {
        o = $.extend({
            speed: 2000,
            selector: "li", //所操作的标签
            fadeIn: false,  //是否渐显效果
            number: false   //是否显示编号
        }, o ||
        {});
        this.each(function(t) {
            var topElement = $(this);
            var items = $(this).children(o.selector);
            var i = items.size(); //元素个数
            var j = 1; //开始元素
            var sh; //clearInterval用标识
            var Intervalfade = function() {
                sh = setInterval(function() {
                    fadeElement();
                }, o.speed);
            }


            var fadeElement = function() {
                if (!o.fadeIn) {
                    items.eq(j % i).show();
                } else {
                    items.eq(j % i).fadeIn(o.speed / 5);
                }
                if (o.number) {
                    numberOver(topElement.children("b").eq(j % i));
                    numberOut(topElement.children("b").eq(j % i).siblings("b"));
                }
                items.eq(j % i).siblings(o.selector).hide();
                j++;
            }
            var changeTo = function(t) {
                items.hide();
                items.eq(t - 1).show();
            }
            var numberOver = function(t) {  //鼠标over数字
                t.css({
                    color: "#fff",
                    background: "#74A8ED",
                    "font-size": "16px",
                    "font-weight": "bold"
                });
            }
            var numberOut = function(t) {   //鼠标out数字
                t.css({
                    color: "#74A8ED",
                    background: "#fff",
                    "font-size": "12px"
                });
            }
            var prepareNum = function() {
                topElement.css({ position: "relative" });
                for (ii = 1; ii <= i; ii++) {
                    var b = document.createElement("b");
                    topElement.append(b);
                    var item = $(b);
                    item.css({
                        position: "absolute",
                        bottom: 10,
                        right: 25 * (i - ii) + 10,
                        "z-index": 2,
                        "font-size": "12px",
                        padding: "2px 6px",
                        border: "1px solid #74A8ED",
                        color: "#74A8ED",
                        background: "#fff",
                        cursor: "pointer",
                        "font-family": "Arial"
                    }).text(ii);
                    item.mouseover(function() {
                        clearInterval(sh);
                        j = $(this).text();
                        changeTo($(this).text());
                        numberOut($(this).siblings("b"));
                        numberOver($(this));
                    });
                }
            }
            $(this).mouseover(function() {
                clearInterval(sh);
            });
            $(this).mouseout(function() {
                sh = setInterval(function() {
                    fadeElement();
                }, o.speed);
            });
            if (i > 1) {
                items.eq(0).siblings(o.selector).hide();
                if (o.number) {
                    prepareNum();
                    numberOver(topElement.children("b").eq(0));
                }
                Intervalfade();
            }
        });

    }
})(jQuery);