jquery tab选项卡、轮播图、无缝滚动

最近做一个页写了一个星期,觉得自己对jquery还是很不熟悉

自己查了一下资料写了几个封装好的tab选项卡、轮播图、无缝滚动

 

  1 $(function(){
  2 //tab选项卡        
  3 jQuery.tab=function(objNav,oClassName,oBox){ //定义参数
  4     var obj=$(objNav);                                       //传参对象
  5     var objWrap=$(oBox);
  6     var oCN=oClassName;
  7     var oUl=objWrap.children(‘ul‘);
  8     obj.children(‘li‘).click(function(){
  9         $(this).siblings(‘li‘).removeClass(oCN);
 10         $(this).addClass(oCN);
 11         objWrap.children(‘div‘).css(‘display‘,‘none‘);
 12         objWrap.children(‘div‘).eq($(this).index()).css(‘display‘,‘block‘);
 13         return false;
 14         });
 15         };
 16 $.tab(‘.r_nav‘,‘r_active‘,‘.r_wrap‘);//对目标参数定义  (下面的也是一样定义对象:class 或者是ID名)
 17 $.tab(‘.wtr‘,‘l_active‘,‘.listen‘);
 18 $.tab(‘#nav ul‘,‘active‘);
 19 //自动切换
 20 jQuery.tab1=function(objNav,oClassName,oBox){
 21     var obj=$(objNav);
 22     var objWrap=$(oBox);
 23     var objLi=obj.children(‘li‘);
 24     var oCN=oClassName;
 25     var oUl=objWrap.children(‘ul‘);
 26     var oLi=oUl.children(‘li‘);    
 27     var time=null;
 28     var i=0;
 29     first();
 30     auto();
 31     function first(){
 32         $(oLi[0]).css(‘zIndex‘,1);
 33         };
 34     function auto(){
 35         setInterval(action,5000);
 36         };
 37     function action(){
 38           
 39             if(i>6){
 40                 i=0
 41                 }
 42             else{    
 43             objLi.eq(i).addClass(oCN);
 44             objLi.eq(i).siblings(‘li‘).removeClass(oCN);
 45             $(oLi[i]).css(‘zIndex‘,1);
 46             $(oLi[i]).siblings(‘li‘).css(‘zIndex‘,-1);
 47             ++i;
 48             }
 49             
 50             }
 51     objLi.click(function(){
 52         $(this).siblings(‘li‘).removeClass(oCN);
 53         $(this).addClass(oCN);
 54         oLi.eq($(this).index()).css(‘zIndex‘,999);
 55         oLi.eq($(this).index()).siblings(‘li‘).css(‘zIndex‘,0);
 56         return false;
 57         });
 58         };
 59 $.tab1(‘.n_turn‘,‘active‘,‘.wrap‘);
 60 
 61 
 62     
 63 jQuery.showOrhide=function(Wrap){
 64     var oWrap=$(Wrap);
 65     var oUl=oWrap.children(‘ul‘);
 66     var oLi=oUl.children(‘li‘);
 67     var Width=(oLi[0].offsetWidth)*(oLi.length);
 68     oLi.mouseover(function(){
 69         $(this).children(‘a.message‘).css(‘display‘,‘block‘);
 70         });
 71     oLi.mouseout(function(){
 72         $(this).children(‘a.message‘).css(‘display‘,‘none‘);
 73         });
 74     }
 75     $.showOrhide(‘.p_wrap‘);
 76 //无缝滚动图片轮播    
 77 jQuery.changeImage=function(Wrap){
 78     var oWrap=$(Wrap);
 79     var oUl=oWrap.children(‘ul‘);
 80     var oLi=oUl.children(‘li‘);
 81     var Width=(oLi[0].offsetWidth)*(oLi.length)*2;
 82     var time=null;
 83     oUl.css(‘width‘,Width+‘px‘);
 84     oUl.append(oUl.children(‘li‘).clone(true));
 85     auto();    
 86     function auto(){   
 87         time = setInterval(showImg,25);   }; 
 88     function showImg (){   
 89        var Left = parseInt(oUl.css(‘left‘));  
 90       Left > -Width/2 ? Left-- : Left = 0;  
 91       oUl.css({left:Left+"px"});};  
 92       oWrap.hover( 
 93      function(){  
 94        clearInterval(time);    },   
 95      function(){   
 96                 auto();
 97                });   
 98                       
 99     }    
100       $.changeImage(‘.p_wrap‘);
101 })

写得不是很好,求大神不吝赐教

jquery tab选项卡、轮播图、无缝滚动,古老的榕树,5-wow.com

郑重声明:本站内容如果来自互联网及其他传播媒体,其版权均属原媒体及文章作者所有。转载目的在于传递更多信息及用于网络分享,并不代表本站赞同其观点和对其真实性负责,也不构成任何其他建议。