jQuery实现的多滑动门，多选项卡效果代码_jquery

运行效果截图如下：

具体代码如下：

<script language="javascript" src="jquery-1.4.2.min.js?1.1.14">《script》<script language="javascript"> $(function(){ var index = 0; $(".tab_title ul li").click(function(){  index = $(".tab_title ul li").index(this);  $(this).addClass("selected").siblings().removeClass("selected");  $(".tab_content p").eq(index).show().siblings().hide(); }); var i = 4; //这个前端展示几个滑动门栏目 var len = $(".u .scrol li").length; var page = 1; var maxpage = Math.ceil(len/i); var scrollWidth = $(".u").width(); var pbox = "
呵呵，没有了
"; $("body").append(pbox); $(".vright").click(function(e){  if(!$(".u .scrol").is(":animated")){  if(page == maxpage ){  $(".u .scrol").stop();  $("#p1").css({   "top": (e.pageY + 20) +"px",   "left": (e.pageX + 20) +"px",   "opacity": "0.9"  }).stop(true,false).fadeIn(800).fadeOut(800);  }else{  $(".u .scrol").animate({left : "-=" + scrollWidth +"px"},2000);  page++;  }  } }); $(".vleft").click(function(){ if(!$(".u .scrol").is(":animated")){  if(page == 1){  $(".u .scrol").stop();  }else{  $(".u .scrol").animate({left : "+=" + scrollWidth +"px"},2000);  page--;  }  } }); });《script》
 
  
<<
  
   
    
1
    
2
    
3
    
4
    
5
    
6
    
7
    
8
    
9
    
10
    
11
    
12
    
13
    
14
    
15
    
16
    
17
    
18
    
19
    
20
    
21
    
22
    
23
    
24
   
  
  
>>
 
 
  
   
1的内容
  
  
   
2的内容
  
  
   
3的内容
  
  
   
4的内容
  
  
   
5的内容
  
  
   
6的内容
  
  
   
7的内容
  
  
   
8的内容
  
  
   
9的内容
  
  
   
10的内容
  
  
   
10的内容
  
  
   
12的内容
  
  
   
13的内容
  
  
   
14的内容
  
  
   
15的内容
  
  
   
16的内容
  
  
   
17的内容
  
  
   
18的内容
  
  
   
19的内容
  
  
   
20的内容
  
  
   
21的内容
  
  
   
22的内容
  
  
   
23的内容
  
  
   
24的内容
  
 

更多关于jQuery相关内容感兴趣的读者可查看本站专题：《jQuery拖拽特效与技巧总结》、《jQuery扩展技巧总结》、《jQuery常见经典特效汇总》、《jQuery动画与特效用法总结》、《jquery选择器用法总结》及《jQuery常用插件及用法总结》

希望本文所述对大家jQuery程序设计有所帮助。