看了一些Tab标签的效果，正好在学习前端，自己动手也写个把~

发现总有个问题， 用淡入淡出效果 和 下拉效果 切换内容的时候  鼠标移动到另一个标签过快 就会出现一个层还没来得及小时另一个层出现了，现在贴出源码，学习中请大家指教了

(function($){   
$.fn.extend({
        TabUi:function(options){
            var _default={
                CurrentLi:0,//默认第0个显示
                tabTime:2000,//每隔两秒自动移动
                CurTabLiCss:"Tab_CurLi",//当前选中的标签样式
                TabContentCss:"Tab_Content",//内容样式
                TabType:"hover",//"hover" 鼠标划过   "click" 鼠标点击
                ShowType:"normal",//"nomal"--正常显示   "fade"--淡入淡出效果  "slide"--下拉效果
                TabAuto:true//"是否自动移动"
            }
            var _this=this;//获取当前对象
            var _opt=$.extend({},_default, options);//的到默认配置参数
            var timer=null;//自动移动的时间参数
            
            
            //初始化对象
            var $tabLi=$(_this).find("ul").eq(0).find("li");//获取tab标签
            var $tabContent=$(_this).find("."+_opt.TabContentCss);//获取内容标签
            var tabNum=$tabLi.length;//获取tab个数
        
            //初始化标签 防止超出个数
            var getNum=function(num){
                if(num>tabNum-1 || num<0)
                {
                    num=0
                }
                return num
            }
            
            //内容效果
            var ShowTypeFunction=function(ShowType,MoveToIndex){
                
                //普通类型
                if(ShowType=="normal")
                {
                    
                    $tabContent.eq(_opt.CurrentLi).stop().hide(0,function(){
                        $tabContent.eq(MoveToIndex).show();     
                    })
                }
                
                //淡入淡出效果
                if(ShowType=="fade")
                {
                    $tabContent.eq(_opt.CurrentLi).stop().fadeOut("fast",function(){
                        $tabContent.eq(MoveToIndex).fadeIn("fast");
                    })
                }
                
                //下拉效果
                if(ShowType=="slide")
                {
                    $tabContent.eq(_opt.CurrentLi).stop().slideUp("fast",function(){                            
                        $tabContent.eq(MoveToIndex).slideDown("fast");
                    })
                }    
            }
            
            //标签移动至指定标签
            var TabMoveTo=function(MoveToIndex)
            {
                //初始化数字
                MoveToIndex=getNum(MoveToIndex);
                
                //标签移动至目标的标签
                $tabLi.removeClass(_opt.CurTabLiCss).eq(MoveToIndex).addClass(_opt.CurTabLiCss);
                
                //内容显示类型
                ShowTypeFunction(_opt.ShowType,MoveToIndex)
                
                _opt.CurrentLi=MoveToIndex;
            }
            
            //自动移动
            var AutoMove=function(){
                moveToIndex=getNum(_opt.CurrentLi+1)                
                TabMoveTo(moveToIndex)
            }
            
            //选中类型
            var TypeFunction=function(TabType){
                //鼠标划过效果
                if(TabType=="hover")
                {
                    $tabLi.hover(function(){
                        //停止自己滚动                  
                        StopMove();
                        //获取当前的位置
                        MoveToIndexID=$tabLi.index(this);
                        //移动到当前的位置
                        TabMoveTo(MoveToIndexID);
                    },function(){
                        //开始自己滚动
                        StartMove();
                    })
                }
                
                //鼠标点击
                if(TabType=="click")
                {
                    $tabLi.bind("click",function(){
                        StopMove();    
                        MoveToIndexID=$tabLi.index(this);
                        
                        TabMoveTo(MoveToIndexID);
                        StartMove();
                    })
                }
            }
            
            //开始移动
            var StartMove=function(){
                if(_opt.TabAuto==true)
                {
                    timer=setInterval(AutoMove,_opt.tabTime);
                }
            }
            
            //停止
            var StopMove=function(){
                if(_opt.TabAuto==true)
                {
                    clearInterval(timer);
                }    
            }
            
            
            _opt.CurrentLi=getNum(_opt.CurrentLi)//初始化默认标签
            
            //选中类型
            TypeFunction(_opt.TabType);
            
            //初始化移动至默认标签
            TabMoveTo(_opt.CurrentLi);
            
            //自动移动开始
            StartMove();
        }
})   
})(jQuery);   

HTML代码：

<div class="ChangeMenu">
    <ul>
        <li></li>
        <li></li>
        <li></li>
    </ul>
    <div class="Tab_Content"></div>
    <div class="Tab_Content"></div>
    <div class="Tab_Content"></div>
</div>

 一些调用参数：

$(".ChangeMenu").TabUi({
　　TabType: "hover",　//触发效果参数
　　ShowType: "normal",　//内容显示效果参数
　　tabTime: 2000,　//间隔时间参数
　　TabAuto: 1,　//自动滚动参数
　　CurrentLi: 0　//默认选中参数
})

DEMO下载