分享一个漂亮的自动播放的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'),{

});
这样是可以实现，但是下面内容框里面的过渡效果也没有了，这样就很逊色了，有那位高手能帮忙看一下，谢谢

打包下载：http://www.wzmsj.com/autotabs/AutoTab.rar