es6 面向对象选项卡（自动轮播功能）

<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <title>Title</title>
    <style>
        *{margin: 0;padding: 0}
        #wrap{width: 600px; margin:20px auto; font-size: 14px;border: 1px solid #ccc;}
        #tabs{width: 100%; height: 40px; line-height: 40px;border-bottom: 1px solid #ccc;}
        #tabs a{display: block;float: left; padding: 0 20px; text-decoration: none;}
        #tabs a.tabactive{background: brown; color: #fff;}
        #content{width: 100%; height: 400px;}
        #content p{height: 400px; display: none}
        #content p.conactive{display: block;}
    </style>
</head>
<body>
    <div id="wrap">
        <div id="tabs">
            <a class="tabactive" href="javascript:;">新闻</a>
            <a href="javascript:;">国内</a>
            <a href="javascript:;">国外</a>
        </div>
        <div id="content">
            <p class="conactive">新闻</p>
            <p>国内</p>
            <p>国外</p>
        </div>
    </div>
    <script>
        window.onload = function () {
            //保存this
            let that = null;
            //声明构造函数
            class Tabs {
                //构造器
                constructor(id){
                    this.wrap = document.getElementById(id);
                    this.abtns = this.wrap.getElementsByTagName('a');
                    this.pcon = this.wrap.getElementsByTagName('p');
                    this.num = 0;
                    this.timer = null;
                    this.init()
                }
                //初始化
                init(){
                    //保存this对象
                    that = this;
                    //执行自动播放功能
                    this.autoplay();
                    //执行点击切换功能
                    this.tab();
                    //鼠标移入时取消定时器
                    this.wrap.onmouseover = function(){
                        clearInterval(that.timer)
                    }
                    //鼠标离开时，开启自动轮播功能
                    this.wrap.onmouseleave = function(){
                        that.autoplay();
                    }
                }
                //点击切换
                tab(){
                    for(let i=0;i<this.abtns.length;i++){
                        this.abtns[i].index = i;
                        this.abtns[i].onclick = function(){
                            //注意：这个函数里的this指向了abtn元素，想要使用实例中的this就要用之前保存的that来代替
                            clearInterval(that.timer)
                            //把点击元素的index赋值给实例上的num，以保证下次自动轮播时起始点正确
                            that.num = this.index
                            that.qiehuan()
                        }
                    }
                }
                //自动播放
                autoplay(){
                    this.timer = setInterval(function(){
                        //注意：这个函数里的this指向了window，想要使用实例中的this就要用之前保存的that来代替
                        that.num++;
                        that.num %= that.abtns.length;
                        that.qiehuan()
                    },2000)
                }
                //切换效果
                qiehuan(){
                    for(let i=0;i<that.abtns.length;i++){
                        that.abtns[i].className = ""
                        that.pcon[i].className = ""
                    }
                    that.abtns[that.num].className = "tabactive"
                    that.pcon[that.num].className = "conactive"
                }
            }
            //生成实例
            new Tabs('wrap')
        }
    </script>
</body>
</html>
es6 面向对象选项卡（自动轮播功能）

猜你喜欢
