分享一个漂亮的自动播放的Tabs
原文：http://bbs.blueidea.com/thread-2968572-1-1.html
此tabs能自动运行，鼠标经过自动停止，加入了淡入淡出效果和选项卡形变的效果
演示地址：http://www.wzmsj.com/autotabs/090104tabs/
下载地址见帖子底部
核心代码:
代码
JScript codevar Tabs = new Class({
Implements: [Options,Events],
options:{
selectedTabCss:'selected',
selectedSectionCss:'selected',
mvSH:0,
firstShow:0,
autoInterval:5,
mouseEvent:'mouseover'
},
initialize:function(tabs, sections, options){
this.setOptions(options);
this.current = this.options.firstShow;
this.tabs = $$(tabs);
this.sections = $$(sections);
this.sectionsLength = $$(sections).length;
this.attach();
this.render();
},
render:function(){
this.sections.each(function(section, index){
if( index !== this.current ) {
section.hide();
}else{
this.showSection(index);
};
}, this);
},
attach:function(){
this.tabs.each(function(tab, index){
tab.addEvent(this.options.mouseEvent,this.tabEvent.bindWithEvent(this,tab));
}, this);
},
tabEvent:function(e,tab){
e.preventDefault();
var index = this.tabs.indexOf(tab);
this.toggleSection(index);
},
toggleSection:function(index){
if(this.current === index) return;
this.hideSection(this.current);
this.current = index;
this.showSection(this.current);
},
showSection:function(index){
var tab = this.tabs[index];
var section = this.sections[index];
tab.addClass(this.options.selectedTabCss);
section.addClass(this.options.selectedSectionCss).show();
this.fireEvent('onShow',[index,tab,section]);
},
hideSection:function(index){
if (index===false) return;
var tab = this.tabs[index];
var section = this.sections[index];
tab.removeClass(this.options.selectedTabCss);
section.removeClass(this.options.selectedSectionCss).hide();
this.fireEvent('onHide',[index,tab,section]);
}
});
/**
* implement effects
*/
Tabs.implement({
showSection:function(index){
var tab = this.tabs[index];
var section = this.sections[index];
switch (this.options.mvSH) {
case 1:
section.setStyles({display:'block',opacity:0}).fade(1);
tab.morph(this.options.selectedTabCss);
break;
default:
tab.addClass(this.options.selectedTabCss);
section.addClass(this.options.selectedSectionCss).show();
}
this.fireEvent('onShow',[index,tab,section]);
},
hideSection:function(index){
if (index===false) return;
var tab = this.tabs[index];
var section = this.sections[index];
switch (this.options.mvSH) {
case 1:
section.hide();
tab.morph(this.options.unSelectedTabCss);
break;
default:
tab.removeClass(this.options.selectedTabCss);
section.removeClass(this.options.selectedSectionCss).hide();
}
this.fireEvent('onHide',[index,tab,section]);
}
});
/**
* implement auto change Tab method to Tabs class
*/
Tabs.implement({
startAuto:function(){
this.attachAuto();
this.start();
},
attachAuto:function(){
this.bindOver = this.stop.bind(this);
this.bindOut = this.start.bind(this);
this.tabs.getParent().addEvents({
'mouseenter':this.bindOver,
'mouseleave':this.bindOut
});
this.sections.getParent().addEvents({
'mouseenter':this.bindOver,
'mouseleave':this.bindOut
});
},
start:function(){
this.autoId = this.autoToggle.periodical(this.options.autoInterval*1000,this);
},
stop:function(){
$clear(this.autoId);
},
autoToggle:function(){
this.numNext = this.current + 1;
this.numNext = this.numNext >= this.sectionsLength ? 0 : this.numNext;
this.toggleSection(this.numNext);
}
});
html代码：
代码
HTML code <style type="text/css">
* {margin:0; padding:0;}
p { margin:10px 0;}
body {padding:10px; font-size:12px;font-family:Arial; text-align:center;}
h1{padding:0px;margin:0px;}
ul {list-style:none;}
.divide {width:762px;height:250px;padding: 10px; margin:0 auto; text-align:left;position:relative;}
.divideh3{position:absolute;top:-5px;left:10px;width:200px;height:31px;background-image:url(images/mainxx3.png);background-repeat:no-repeat;background-position:-272px -36px;}
.tabs { height: 24px; position:absolute; right:3px;top:0px;}
.tabs li { width: 79px; float: left; height:26px;line-height:25px; cursorointer; background: #EEE; margin: 0 5px;text-align:center;border:0;color:#3d3d3d; }
.tabs li.selected {
background:#F00;
height:26px;line-height:25px; color:#FFF; background:url(bgxx.gif) no-repeat;
}
.tabOn {
height:26px;line-height:25px;color:#FFF; background:#d61d3d;
}
.tabOff {
background:#EEE; border:0; height:26px;
line-height:25px; color:#3d3d3d;
}
.sections{width:762px;height:272px;overflow:hidden;position:absolute;top:26px;width:100%;border-top:2px solid #d61d3d;border-left:2px solid #d61d3d;}
.sections div{padding:10px;}
</style>
<script type="text/javascript" src="../mootools-1.2-core-nc1.js"></script>
<script type="text/javascript" src="../Element.Shortcuts.js"></script>
<script type="text/javascript" src="Tabs.js"></script>
<script type="text/javascript">
document.addEvent('domready',function(){
var myTabs = new Tabs($$('#tabs li'),$$('#sections div'),{
mvSH:1,
autoInterval:3,
selectedTabCss:'.tabOn',
unSelectedTabCss:'.tabOff'
});
myTabs.startAuto();
});
</script>
</head>
<body>
<div class="divide">
<h3></h3>
<ul id="tabs" class="tabs">
<li><span>时尚女装</span></li>
<li><span>男性时尚</span></li>
<li><span>可爱童装</span></li>
<li><span>鞋包配件</span></li>
<li><span>美容用品</span></li>
<li>创意家居</li>
</ul>
<div id="sections" class="sections">
<div><img src="4.jpg" width="100%" /></div>
<div style="display:none"><img src="3.jpg" /></div>
<div style="display:none"><img src="4.jpg" width="100%" /></div>
<div style="display:none"><img src="3.jpg" /></div>
<div style="display:none"><img src="4.jpg" width="100%" /></div>
<div style="display:none"><img src="3.jpg"/></div>
</div>
</div>
遇到一个问题想请教下高手，就是
case 1:
section.hide();
tab.morph(this.options.unSelectedTabCss);
break;
这里加入了形变的动画效果后，选项卡当前状态就是只能用背景颜色background:#d61d3d; .tabOn {
height:26px;line-height:25px;color:#FFF; background:#d61d3d;
}
.tabOff {
background:#EEE; border:0; height:26px;
line-height:25px; color:#3d3d3d;
} 用background:url(bgxx.gif) no-repeat;背景图像无效果，而最终想要得到的效果是:
,我有试过将 var myTabs = new Tabs($$('#tabs li'),$$('#sections div'),{
mvSH:1,
autoInterval:3,
selectedTabCss:'.tabOn',
unSelectedTabCss:'.tabOff'
});改成
var myTabs = new Tabs($$('#tabs li'),$$('#sections div'),{
});
这样是可以实现，但是下面内容框里面的过渡效果也没有了，这样就很逊色了，有那位高手能帮忙看一下，谢谢
