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

时间:2022-03-18 07:55:39

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

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

 $(function(){
//tab选项卡
jQuery.tab=function(objNav,oClassName,oBox){ //定义参数
var obj=$(objNav); //传参对象
var objWrap=$(oBox);
var oCN=oClassName;
var oUl=objWrap.children('ul');
obj.children('li').click(function(){
$(this).siblings('li').removeClass(oCN);
$(this).addClass(oCN);
objWrap.children('div').css('display','none');
objWrap.children('div').eq($(this).index()).css('display','block');
return false;
});
};
$.tab('.r_nav','r_active','.r_wrap');//对目标参数定义 (下面的也是一样定义对象:class 或者是ID名)
$.tab('.wtr','l_active','.listen');
$.tab('#nav ul','active');
//自动切换
jQuery.tab1=function(objNav,oClassName,oBox){
var obj=$(objNav);
var objWrap=$(oBox);
var objLi=obj.children('li');
var oCN=oClassName;
var oUl=objWrap.children('ul');
var oLi=oUl.children('li');
var time=null;
var i=0;
first();
auto();
function first(){
$(oLi[0]).css('zIndex',1);
};
function auto(){
setInterval(action,5000);
};
function action(){ if(i>6){
i=0
}
else{
objLi.eq(i).addClass(oCN);
objLi.eq(i).siblings('li').removeClass(oCN);
$(oLi[i]).css('zIndex',1);
$(oLi[i]).siblings('li').css('zIndex',-1);
++i;
} }
objLi.click(function(){
$(this).siblings('li').removeClass(oCN);
$(this).addClass(oCN);
oLi.eq($(this).index()).css('zIndex',999);
oLi.eq($(this).index()).siblings('li').css('zIndex',0);
return false;
});
};
$.tab1('.n_turn','active','.wrap'); jQuery.showOrhide=function(Wrap){
var oWrap=$(Wrap);
var oUl=oWrap.children('ul');
var oLi=oUl.children('li');
var Width=(oLi[0].offsetWidth)*(oLi.length);
oLi.mouseover(function(){
$(this).children('a.message').css('display','block');
});
oLi.mouseout(function(){
$(this).children('a.message').css('display','none');
});
}
$.showOrhide('.p_wrap');
//无缝滚动图片轮播
jQuery.changeImage=function(Wrap){
var oWrap=$(Wrap);
var oUl=oWrap.children('ul');
var oLi=oUl.children('li');
var Width=(oLi[0].offsetWidth)*(oLi.length)*2;
var time=null;
oUl.css('width',Width+'px');
oUl.append(oUl.children('li').clone(true));
auto();    
function auto(){   
    time = setInterval(showImg,25);   }; 
function showImg (){   
   var Left = parseInt(oUl.css('left'));  
  Left > -Width/2 ? Left-- : Left = 0;  
  oUl.css({left:Left+"px"});};  
  oWrap.hover( 
 function(){  
   clearInterval(time);    },   
 function(){   
  auto();
}); }
$.changeImage('.p_wrap');
})

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