ES6选项卡 自动播放选项卡

css部分

.on{ background:#f60;color:#fff}
.box div{   width:200px;  height:200px;   border:1px solid #000;  display:none}

html部分

   
   
    
    
1111
    
22222
    
3333

js部分

 class Tab {
        constructor(id) {
            this.oBox = document.getElementById(id);
            this.aBtn = this.oBox.getElementsByTagName('input');
            this.aDiv = this.oBox.getElementsByClassName('contentbox');
            this.iNow=0;
            this.init();
        }
        init() {
            for (let i = 0; i < this.aBtn.length; i++) {
                this.aBtn[i].onclick = function () {
                    this.hide();
                    this.show(i);
                }.bind(this);
            }
        }
        hide() {
            for (let i = 0; i < this.aBtn.length; i++) {
                this.aBtn[i].className ='';
                this.aDiv[i].style.display = 'none';
            }
        }
        show(i) {
            this.aBtn[i].className ='on';
            this.aDiv[i].style.display = 'block'
        }
    }

    class AutoTab extends Tab {
        constructor(id) {
            super(id);
            setInterval(this.next.bind(this), 1500)
        }
        next() {
            this.iNow++;
            if (this.iNow == this.aBtn.length) this.iNow = 0;
            this.hide();
            this.show(this.iNow);
        }

    }

    window.onload = function () {
        new Tab('box')
        new AutoTab('box2')
    }