轮播选项卡（ES3)-CSDN博客

本文链接：https://blog.csdn.net/weixin_45838680/article/details/107048458

选项卡轮播：
在这里插入图片描述
js部分（面向对象封装选项卡）

function $(id) {
    return typeof id === 'string' ? document.getElementById(id) : null;
}

function TabsFn() {  // 选项卡构造函数
     // 属性
    this.lis = $('tab_header').getElementsByTagName('li');
    this.contents = $('tab_content').getElementsByClassName('dom');
}

TabsFn.prototype = {  // 选项卡原型
    init: function(){  
        // 1. 设置索引
        this.setId();
        // 2. 绑定事件
        this.bindEvent();
    },
    // 设置索引(id)
    setId: function () {
        for(var i=0; i<this.lis.length; i++){
             this.lis[i].id = i;
        }
    },
    // 绑定事件
    bindEvent: function () {
        // ★备份指针★
        var self = this;
        var TimeID;
        // 一开始就轮播
        var i =0;
        TimeID = setInterval( function(){
            // var i=0;
            // 2.1 设置所有li都不被选中样式  
            if (i === self.lis.length-1) {
                i=0;
                for(let j=0; j<self.lis.length; j++){
                    self.lis[j].className = '';
                    self.contents[j].style.display = 'none';
                };
                console.log(i);
                // 2.2 当前的li被选中
                self.lis[i].className = 'selected';  // ★self.lis[i] == self.lis[i].lis[i]
                self.contents[self.lis[i].id].style.display = 'block'; 
            }else{
                i++;
                console.log(i);
                for(let j=0; j<self.lis.length; j++){
                self.lis[j].className = '';
                self.contents[j].style.display = 'none';
                };
                // 2.2 当前的li被选中
                self.lis[i].className = 'selected';  // ★self.lis[i] == self.lis[i].lis[i]
                self.contents[self.lis[i].id].style.display = 'block'; 
            }
        },2000);
        for (let k = 0; k < self.lis.length; k++) {
            self.lis[k].onmouseover = function(){
                // 鼠标进入停止轮播
                clearInterval(TimeID);
                for(var j=0; j<self.lis.length; j++){
                    self.lis[j].className = '';
                    self.contents[j].style.display = 'none';
                };
                // 2.2 当前的li被选中
                this.className = 'selected'; //this=self.lis[k]
                self.contents[this.id].style.display = 'block'; 
            };
             // 鼠标离开轮播 
            self.lis[k].onmouseout = function(){
                var i = k;
                console.log(i);
                TimeID = setInterval( function(){
                    // var i=0;
                    // 2.1 设置所有li都不被选中样式  
                    if (i === self.lis.length-1) {
                        i=0;
                        for(let j=0; j<self.lis.length; j++){
                            self.lis[j].className = '';
                            self.contents[j].style.display = 'none';
                        };
                        console.log(i);
                        // 2.2 当前的li被选中
                        self.lis[i].className = 'selected';  // ★self.lis[i] == self.lis[i].lis[i]
                        self.contents[self.lis[i].id].style.display = 'block'; 
                    }else{
                        i++;
                        console.log(i);
                        for(let j=0; j<self.lis.length; j++){
                        self.lis[j].className = '';
                        self.contents[j].style.display = 'none';
                        };
                        // 2.2 当前的li被选中
                        self.lis[i].className = 'selected';  // ★self.lis[i] == self.lis[i].lis[i]
                        self.contents[self.lis[i].id].style.display = 'block'; 
                    }
                },2000);
            }
        };   
    }
};

html部分：

<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <title>选项卡</title>
    <link rel="stylesheet" href="css/index.css">
</head>
<body>
    <div id="tab">
        <!--头部-->
        <div id="tab_header">
            <ul>
                <li class="selected">公告</li>
                <li>规则</li>
                <li>论坛</li>
                <li>安全</li>
                <li>公益</li>
            </ul>
        </div>
        <!--主要内容-->
        <div id="tab_content">
            <div class="dom" style="display: block">
                <ul>
                    <li><a href="#">数据七夕:金牛爱送玫瑰</a></li>
                    <li><a href="#"> 阿里打造"互联网监管"</a></li>
                    <li><a href="#">10万家店60万新品</a></li>
                    <li><a href="#">全球最大网上时装周</a></li>
                </ul>
            </div>
            <div class="dom" >
                <ul>
                    <li>
                        <a href="#">“全额返现”要管控啦</a>
                    </li>
                    <li>
                        <a href="#">淘宝新规发布汇总(7月)</a>
                    </li>
                    <li>
                        <a href="#">炒信规则调整意见反馈</a>
                    </li>
                    <li>
                        <a href="#">质量相关规则近期变更</a>
                    </li>
                </ul>
            </div>
            <div class="dom">
                <ul>
                    <li>
                        <a href="#">阿里建商家全链路服务</a>
                    </li>
                    <li>
                        <a href="#">个性化的消费时代来临</a>
                    </li>
                    <li>
                        <a href="#">跨境贸易是中小企业机</a>
                    </li>
                    <li>
                        <a href="#">美妆行业虚假信息管控</a>
                    </li>
                </ul>
            </div>
            <div class="dom">
                <ul>
                    <li>
                        <a href="#">接次文件，毁了一家店</a>
                    </li>
                    <li>
                        <a href="#">账号安全神器阿里钱盾</a>
                    </li>
                    <li>
                        <a href="#">新版阿里110上线了</a>
                    </li>
                    <li>
                        <a href="#">卖家学违禁避免被处罚</a>
                    </li>
                </ul>
            </div>
            <div class="dom">
                <ul>
                    <li>
                        <a href="#">为了公益high起来</a>
                    </li>
                    <li>
                        <a href="#">魔豆妈妈在线申请</a>
                    </li>
                </ul>
            </div>
        </div>
    </div>
<script src="js/Tab.js"></script>
<script type="text/javascript">
    var tab = new TabsFn();  // 创建选项卡实例
    tab.init();  // 初始化
</script>
</body>
</html>

css部分：

*{
    margin: 0;
    padding: 0;
    list-style: none;
    box-sizing: border-box;
}

a{
    text-decoration: none;
    color: #000;
}

#tab{
    width: 500px;
    height: 120px;
    border: 1px solid #ccc;
    margin: 100px auto;
}

/*选项卡--头部*/
#tab_header{
    height: 29px;
    line-height: 28px;
    /*background-color: red;*/
    overflow: hidden;
}

#tab_header ul{
    width: 500px;
    display: flex;
    justify-content: space-around;
    align-items: center;
}

#tab_header ul li{
    flex: 1;
    text-align: center;
    background-color: #e8e8e8;
    border-bottom: 1px solid #cccccc;
}

#tab_header ul li.selected{
    background-color: #ffffff;
    border-bottom: none;
     color: orangered;
     font-weight: bolder;

    /*左右线条*/
    border-left: 1px solid #cccccc;
    border-right: 1px solid #cccccc;
}

#tab_header ul li:nth-child(1){
    border-left: none;
}

#tab_header ul li:nth-last-child{
    border-right: none;
}

#tab_header ul li:hover{
    cursor: pointer;
    font-weight: bolder;
    color: orangered;
}
/*选项卡--头部*/

/*选项卡--主要内容*/
#tab_content{

}

#tab_content .dom{
   padding-top: 20px;
   display: none;
}

#tab_content .dom ul li{
    float: left;
    width: 220px;
    /*background-color: red;*/
    text-align: center;
    margin: 5px;
}
/*选项卡--主要内容*/