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

港控/mmm° 2023-08-17 15:38 82阅读 0赞

<!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>

转载于:https://www.cnblogs.com/javascripter/p/11517775.html