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

*/
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;