自动播放选项卡（js）

代码效果展示

<!DOCTYPE html>
<html>
    <head>
        <meta charset="UTF-8">
        <title>自动播放选项卡</title>
        <style type="text/css">
            .box{
                width: 1000px;
                border: 1px solid mediumspringgreen;
                margin: 0 auto;
            }
            .box > div{
                display: none;
                background-color: black;
                font-size: 55px;
                color: red;
            }
            button{
                width: 200px;
                height: 100px;
                font-size: 22px;
                margin-left:35px ;
                display: inline-block;
            }
            .box > .film{
                background-color: aquamarine;
                font-size: 33px;
            }
            .box > .canon{
                display: block;
            }
        </style>
    </head>
    <body>
        <div class="box">
            <button class="film">国产电影</button>
            <button>欧美电影</button>
            <button>日韩电影</button>
            <button>其它电影</button>
            <div class="canon">大话西游、鬼子来了、霸王别姬、斗牛、杀生、让子弹飞、一步之遥、邪不压正、无人区、卧虎藏龙、东邪西毒</div>
            <div>穆赫兰道、盗梦空间、肖生克的救赎、阿甘正传、楚门的世界、电锯惊魂、死神来了、异次元杀阵、泰坦尼克号</div>
            <div>熔炉、哆啦A梦、千与千寻、釜山行、汉江怪物、七龙珠、灌篮高手、热血高校、午夜凶铃</div>
            <div>三傻大闹宝莱坞、小萝莉的猴神大叔、地球上的星星、巴霍巴利王、我的个神啊、贫民窟的百万富翁</div>
        </div>
    </body>
</html>
<script type="text/javascript">
    //获得盒子
    var obox = document.getElementsByClassName('box')[0]
    //通过盒子获取其中所有的button和div
    var abtns = obox.getElementsByTagName('button')
    var adivs = obox.getElementsByTagName('div')
    //当前坐标
    var number = 0
    for (var i = 0; i < abtns.length; i++) {
        abtns[i].index = i
        abtns[i].onclick = function () {
            for (var j = 0; j < abtns.length; j++) {
                abtns[j].className = ''
                adivs[j].className = ''
            }
            this.className = 'film'
            adivs[this.index].className = 'canon'
            number = this.index
        }
    }
    //循环函数，使用定时器周期调用，做坐标自加操作，通过求余处理得到0-3之间的数清空属性名在赋值
    function next(){
        number++
        number %= 4
        for (var j = 0; j < abtns.length; j++) {
            abtns[j].className = ''
            adivs[j].className = ''
        }
        abtns[number].className = 'film'
        adivs[number].className = 'canon'
    }
    
    timer = setInterval(next,1000)
    
    // 如果鼠标放到box上面，将定时器销毁，鼠标离开box的时候，重新创建定时器自动播放
    obox.onmouseover = function () {
        clearInterval(timer)
    }
    obox.onmouseout = function () {
        timer = setInterval(next, 1000)
    }
    
</script>

代码思路：先有一个大盒子，再向其中添加需要用到的button和div。给所有的button和div设置基本属性，比较关键的是div的display值。其实选项卡实现的实质就是对div中display属性值的修改，自动播放的实现则依赖于定时器对实现选项卡功能函数的周期调用。该函数通过遍历button和div清空特殊设置，保留基本设置，再给点击的button和对应div设置选中状态和显示设置。
注：用过盒子获取其中的标签并修改其中属性，比较容易被忽略的一点，如果出现奇怪的现象可以从这点考虑考虑。

自动播放选项卡（js）

推荐阅读更多精彩内容