选项卡自动切换和停止

css如下:

    /*清除样式*/
    *{margin: 0;padding: 0; font-size: 24px;}
    ul{list-style: none;}
    /*选项卡总体*/
    .tab_box{
        width: 804px;
        height: 350px;
        margin: 20px auto;
        border:1px solid #ccc;
    }
    /*头部导航样式*/
    .tab_head{
        height: 101px;
    }
    .tab_head_div{
        float: left;
        width: 200px;
        height: 100px;
        text-align: center;
        line-height: 100px;
        border-right: 1px solid #ccc;
        border-bottom: 1px solid #ccc;
        background: rgba(204, 204, 204, 0.26);
    }
    /*导航选项最后一个不要右边框*/
    .tab_head_div_r{
        border-right: none;
    }
    /*选项卡——内容*/
    .tab_con{
        width: 750px;
        height: 240px;
        margin: 20px auto;
    }
    /*内容里面ul全部设置隐藏*/
    .tab_con_ul{
        display: none;
    }
    .tab_con_ul li{
        margin: 10px 10px;
    }
    /*鼠标移到的变化  显示ul*/
    .tab_con .current{
        display: block;
    }
    /*鼠标移到的变化 更改导航样式*/
    .tab_head .current{
        background: #fff;
        border-bottom: none;
        cursor: pointer;/*鼠标变成小手*
  

html如下:

<div class="tab_box">
    <div class="tab_head" id="tab_head">
        <div class="tab_head_div current">公司动态</div>
        <div class="tab_head_div">开学典礼</div>
        <div class="tab_head_div">学员感言</div>
        <div class="tab_head_div tab_head_div_r">学员故事</div>
    </div>
    <div class="tab_con" id="tab_con">
        <ul class="tab_con_ul current">
            <li>网络营销课程钜惠5000元，只剩最后10天</li>
            <li>《传智特刊》开年任性大改版,第22期炫酷上线</li>
            <li>2014版传智播客PHP学习路线图霸气上线</li>
            <li>IT教师的福音,专教技术干货的大学教材震撼首发</li>
        </ul>
        <ul class="tab_con_ul">
            <li>且行且珍惜，退伍兵钟爱传智播客</li>
            <li>听听学员讲述传智播客跟其他机构的对比</li>
            <li>基础班学员为新学员指点迷津</li>
            <li>女汉纸背后的故事：试听课上被老师折服</li>
        </ul>
        <ul class="tab_con_ul">
            <li>用汗水证明这是传智播客的时代</li>
            <li>瓦工的“程序员”梦</li>
            <li>iOS学习之路,撑起我的成长梦想</li>
        </ul>
        <ul class="tab_con_ul">
            <li>一个让老程序员都汗颜的应届生</li>
            <li>草根学员从求知走向岗位的蜕变故事</li>
            <li>我与编程的“爱恨情仇”</li>
            <li>狂风暴雨之后才是最灿烂的彩虹</li>
        </ul>
    </div>
</div>

js如下:

    var head_divs=document.getElementById("tab_head").getElementsByTagName("div");
    var len=head_divs.length;
 
    /*索引值  大小是从0-3*/
    var current_index=0;
    /*计时器  每隔三秒执行一次autoChange函数*/
    var timer=window.setInterval(autoChange,3000);
 
    /*为每个div添加鼠标事件*/
    for(var i=0;i<len;i++){
        /*移入事件*/
        head_divs[i].onmouseover=function () {
            /*清除定时器*/
            clearInterval(timer);
            /*获取所有ul*/
            var con_uls=document.getElementById("tab_con").getElementsByTagName("ul");
            /*循环 先把所有ul和所有head_div设置为普通样式*/
            for(var j=0;j<len;j++){
                head_divs[j].className=head_divs[j].className.replace(" current","");
                con_uls[j].className=con_uls[j].className.replace(" current","");
                /*遇到当前鼠标指着的位置  设置其样式为变化样式*/
                if(head_divs[j]==this){
                    head_divs[j].className+=" current";
                    con_uls[j].className+=" current";
                }
            }
        }
        /*移出事件 恢复定时器  自动切换*/
        head_divs[i].onmouseout=function () {
            timer=setInterval(autoChange,1=3000);
        }
    }
 
    function autoChange() {
        /*索引值自加*/
        ++current_index;
        /*如果索引大于导航个数（等于len也就是大于总个数） 清零*/
        if(current_index==len){
            current_index=0;
        }
        /*获取全部ul*/
        var con_uls=document.getElementById("tab_con").getElementsByTagName("ul");
 
        for(var i=0;i<len;i++){
            /*遍历 清除所有变化 都恢复为普通样式*/
            con_uls[i].className=con_uls[i].className.replace(" current","");
            head_divs[i].className=head_divs[i].className.replace(" current","");
            /*索引值代表当前位置 为当前位置设置变化*/
            if(head_divs[i]==head_divs[current_index]){
                head_divs[i].className+=" current";
                con_uls[i].className+=" current";
            }
        }
    }