tab选项卡可自动播放

效果如图，此代码设计是考虑到tab标签不是文字+背景的模式，默认效果和当前效果都是图片。也就是每个tab标签需要2个样式情况。如果项目只需要文字+背景图的tab标签，可以样式合并，或者略微改下js去掉+(n+1)。

js代码

function tab(classArr, normalClass, hoverClass, contClass, auto){
    function getElementsByClass(searchClass,node,tag) {
        var classElements = new Array();
        if ( node == null )
            node = document;
        if ( tag == null )
            tag = '*';
        var els = node.getElementsByTagName(tag);
        var elsLen = els.length;
        var pattern = new RegExp("(^|\\s)"+searchClass+"(\\s|$)");
        for (i = 0, j = 0; i < elsLen; i++) {
            if ( pattern.test(els[i].className) ) {
                classElements[j] = els[i];
                j++;
            }
        }
        return classElements;
    }
    var tabArray = getElementsByClass(classArr),
        contArray = getElementsByClass(contClass),
        now = 0,
        len = tabArray.length;
    auto = auto || 'false';
    function normal(){
        for (var i = 0; i < len; i++){
            tabArray[i].className =  normalClass + (i+1);
            contArray[i].style.display = 'none';
        }
    }
    function show(now){
        tabArray[now].className = hoverClass + (now+1);
        contArray[now].style.display = 'block';
    }
    function autoPlay(){
        if (now < len){
            normal();
            show(now);
            now += 1;
        }else{
            now = 0;
            normal();
            show(now);
        }
        setTimeout(autoPlay, 2000)
    }
    if (auto === 'auto'){
        autoPlay();
    }
    for (var i = 0; i < len; i++){(function(i){
        tabArray[i].onclick = function(){
            normal();
            show(i);
            now = i;
        }
    })(i)
    }
}
tab('tab', 'li_normal', 'li_hover', 'cont', 'auto');

使用说明：
tab可传进了5个参数，前4个为必须
classArr：这个是选项卡额外加的样式名，用来获取数组，其实无样式内容；
normalClass：是去掉数字号的默认的样式（实际样式名是li_normal1，li_norma2这样依次排序），此参数传li_normal；
hoverClass：是去掉数字号触发的样式（实际样式名是li_hover1，li_hover2这样依次排序），此参数传li_hover；
contClass：是内容的样式类名；样式名可以自己改，传参数对应上即可；
auto：如果需要自动播放tab选项卡，需要加上第5个参数'auto'。

html代码

<ul class="tab_ul">
    <li class="tab li_hover1">第一个标签</li>
    <li class="tab li_normal2">第二个标签</li>
    <li class="tab li_normal3">第三个标签</li>
</ul>
<div class="cont" style="display:block;">第一个标签的内容</div>
<div class="cont">第二个标签的内容</div>
<div class="cont">第三个标签的内容</div>

css代码

div,ul,li{ margin:0; padding:0; font-size:12px;}
.tab_ul{ width:285px; overflow:hidden;list-style:none;}
.tab_ul li{  display:inline; float:left; width:93px; height:38px; margin-right:2px; text-indent:-9999px; cursor:pointer;}
.li_normal1{ background-image:url(../images/tab_normal1.jpg);}
.li_normal2{ background-image:url(../images/tab_normal2.jpg);}
.li_normal3{ background-image:url(../images/tab_normal3.jpg);}
.li_hover1{ background-image:url(../images/tab_hover1.jpg);}
.li_hover2{ background-image:url(../images/tab_hover2.jpg);}
.li_hover3{ background-image:url(../images/tab_hover3.jpg);}
.cont{ display:none; width:281px; height:120px; padding-top:10px; text-indent:10px; font:bold 14px "宋体"; background-color:#ccc; color:#666; border:1px solid #999;}