简易选项卡自动切换-优快云博客

本文链接：https://blog.youkuaiyun.com/VLilyV/article/details/72179513

自动简易选项卡

<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <title>自动简易选项卡</title>
    <style type="text/css">
        *{padding: 0px;margin: 0px;list-style: none;}
        #div1 ul{
            display: inline-block;
        }
        li{
            float: left;border: 1px solid #ccc;width: 60px;height: 30px;line-height: 30px;text-align: center;cursor: pointer;
        }
        #div1 div{
            width: 245px;height: 100px;background: pink;display: none;
        }

    </style>
    <script type="text/javascript">
        window.onload=function(){
            var oDiv1 = document.getElementById('div1');
            var aLi = oDiv1.getElementsByTagName('li');
            var aDiv = oDiv1.getElementsByTagName('div');
            var timer=null;
            var num=0;
            var len=aLi.length;
            // alert(aLi.length);
            // alert(aDiv[0].innerHTML);
            for(var i=0;i<aLi.length;i++){
                // index是自定义的一个属性，不能直接加在html中，浏览器会过滤掉它，报错，但是通过js添加，就没有问题：目的：让内容与this有上关系，以便操作内容
                aLi[i].index=i;
                aLi[i].onmouseover=function(){
                    clearInterval(timer);
                    num=this.index;//把当前选项卡转换成鼠标当前经过的选项卡
                    set_attr();

                }
                aLi[i].onmouseout=function(){
                    autoplay();

                }
            }
            // 第一步，设置需变化的属性函数
             function set_attr(){
                // 其他不需要变化的选项卡
                for(var i=0;i<aLi.length;i++){
                        aLi[i].style.background = '';
                        aDiv[i].style.display='none';
                    }
                // 当前变化的选项卡
                aLi[num].style.background = 'red';
                aDiv[num].style.display='block';
             }
            //  第二步，设置自动播放函数，自动播放条件是每隔1s让num（当前变化的选项卡下标）加1
             function autoplay(){
                timer= setInterval(function(){
                    set_attr();
                    num=(++num)%len;//取模配合定时器下的自加，就能构成循环     
                 },1000)
             }
             //初始化函数，并自动播放
             autoplay();
        }
    </script>
</head>
<body>
    <div id="div1">
        <ul>
            <li>教育</li>
            <li>培训</li>
            <li>工作</li>
            <li>生活</li>
        </ul>
        <div>教育是asdhjk</div>
        <div>培训是asdhjk</div>
        <div>工作是asdhjk</div>
        <div>生活是asdhjk</div>
    </div>
</body>
</html>

自动选项卡