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 面向对象选项卡（自动轮播功能）

最新文章

热门文章
