分享一个漂亮的自动播放的Tabs

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 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 >