jQuery实现的Tab滑动选项卡及图片切换(多种效果)小结_jquery

这里汇总了几个Tab，滑动门，选项卡，图片切换，在一个网页中实现了超多的常用效果，大家喜欢的滑动门，焦点图切换，标签选项卡以及文字轮番等都集中在了一起，无聊的功劳，忙的时候还顾不上写，另外还加入了圆角，都是参考以前学习的知识写的。期间使用了jquery-1.6.2.min.js框架库。

运行效果截图如下：

在线演示地址如下：

http://demo.jb51.net/js/2015/jquery-n-tab-cha-pic-codes/

具体代码如下：

$(document).ready(function() {
 /*
 o1: 标签元素
 o2: 内容元素
 c : 标签元素显示用样式
 e : 触发事件 如 click mouseover 
 */
 function tab1(o1,o2,c,e){
 o1.each(function(i){
 $(this).bind(e,function(){
 o2.hide().eq(i).show();
 o1.removeClass(c);
 $(this).addClass(c);
 })
 if ($(this).hasClass(c)) {
 $(this).addClass(c);
 o2.hide().eq(i).show();
 }
 })
 }
 /*
 o1: 标签元素
 o2: 内容元素
 c : 标签元素显示用样式
 t1: 标签切换时间
 t2: 内容渐进时间
 a : 内容渐进起始半透明度 0.1~1
 b : 内容渐进结束半透明度 0.1~1
 */
 function tab2(o1,o2,c,t1,t2,a,b){
 var count=o1.size()-1;
 var now;
 var TimeInterval;
 o1.each(function(i){
 $(this).mouseover(function(){
 o2.hide().eq(i).show();
 o1.removeClass(c);
 $(this).addClass(c);
 window.clearInterval(TimeInterval);
 }).mouseout(function(){
 now = i+1;
 TimeInterval = window.setInterval(changeimage,t1);
 });
 //初始化显示
 if ($(this).hasClass(c)) {
 $(this).addClass(c);
 o2.hide().eq(i).show();
 now = i+1;
 }
 })
 TimeInterval = window.setInterval(changeimage,t1);
 function changeimage(){
 if(now>count)now=0;
 o2.hide().eq(now).stop().fadeTo(0,a).fadeTo(t2,b);
 o1.removeClass(c).eq(now).addClass(c);
 now++;
 }
 }
 /*
 o1: 标签元素
 o2: 内容元素
 o3: 内容元素
 c : 标签元素显示用样式
 e : 触发事件 如 click mouseover 
 */
 function tab3(o1,o2,o3,c,e){
 o1.each(function(i){
 $(this).bind(e,function(){
 o2.hide().eq(i).show();
 o3.hide().eq(i).show();
 o1.removeClass(c);
 $(this).addClass(c);
 })
 if ($(this).hasClass(c)) {
 $(this).addClass(c);
 o2.hide().eq(i).show();
 o3.hide().eq(i).show();
 }
 })
 }
 /*
 o1: 标签元素
 o2: 内容元素
 o3: 内容元素
 c : 标签元素显示用样式
 t1: 标签切换时间
 t2: 内容渐进时间
 a : 内容渐进起始半透明度 0.1~1
 b : 内容渐进结束半透明度 0.1~1
 */
 function tab4(o1,o2,o3,c,t1,t2,a,b){
 var count=o1.size()-1;
 var now;
 var TimeInterval;
 o1.each(function(i){
 $(this).mouseover(function(){
 o2.hide().eq(i).show();
 o3.hide().eq(i).show();
 o1.removeClass(c);
 $(this).addClass(c);
 window.clearInterval(TimeInterval);
 }).mouseout(function(){
 now = i+1;
 TimeInterval = window.setInterval(changeimage,t1);
 });
 //初始化显示
 if ($(this).hasClass(c)) {
 $(this).addClass(c);
 o2.hide().eq(i).show();
 o3.hide().eq(i).show();
 now = i+1;
 }
 })
 TimeInterval = window.setInterval(changeimage,t1);
 function changeimage(){
 if(now>count)now=0;
 o3.hide().eq(now).show();
 o2.hide().eq(now).stop().fadeTo(0,a).fadeTo(t2,b);
 o1.removeClass(c).eq(now).addClass(c);
 now++;
 }
 }
 //调用函数
 tab1($(".yuan1 .d_t"),$(".yuan1 .bbb"),"on1","mouseover");
 tab1($(".yuan2 .d_t"),$(".yuan2 .bbb"),"on1","click");
 tab1($(".d0 .aa"),$(".d0 .bb"),"on","click");
 tab1($(".d1 .aa"),$(".d1 .bb"),"on","mouseover");
 tab2($(".d2 .aa"),$(".d2 .bb"),"on",1500,800,0.1,1);
 tab3($(".d3 .aa"),$(".d3 .bb"),$(".d3 .cc"),"on","mouseover");
 tab4($(".d4 .aa"),$(".d4 .bb"),$(".d4 .cc"),"on",1500,800,0.1,1);
 tab4($(".d5 .aa"),$(".d5 .bb"),$(".d5 .cc"),"on",1500,0,1,1);
});




 鼠标悬浮切换

 
 
 
 
 第一个标签
 
 
 第二个标签
 
 
 第三个标签
 
 
 
 第一个内容