#控制多個選項卡自動播放 ``` <style> #div1 div, #div2 div { width: 200px; height: 200px; border: 1px #000 solid; display: none; } .active { background: red; } </style> <script> window.onload = function () { var t1 = new Tab('div1'); t1.init(); var t2 = new Tab('div2'); t2.init(); t2.autoPlay(); }; function Tab(id) { this.oParent = document.getElementById(id); this.aInput = this.oParent.getElementsByTagName('input'); this.aDiv = this.oParent.getElementsByTagName('div'); this.iNow = 0; } Tab.prototype.init = function () { var _this = this; for (var i = 0; i < this.aInput.length; i++) { this.aInput[i].index = i; this.aInput[i].onclick = function () { _this.change(this); }; } }; Tab.prototype.change = function (obj) { for (var j = 0; j < this.aInput.length; j++) { this.aInput[j].className = ''; this.aDiv[j].style.display = 'none'; } obj.className = 'active'; this.aDiv[obj.index].style.display = 'block'; }; Tab.prototype.autoPlay = function(){ var _this = this; setInterval(function () { if(_this.iNow == _this.aInput.length - 1){ _this.iNow = 0; }else{ _this.iNow++; } for (var j = 0; j < _this.aInput.length; j++) { _this.aInput[j].className = ''; _this.aDiv[j].style.display = 'none'; } _this.aInput[_this.iNow].className = 'active'; _this.aDiv[_this.iNow].style.display = 'block'; }, 2000); }; </script> <div id="div1"> <input class="active" type="button" value="1"> <input type="button" value="2"> <input type="button" value="3"> <div style="display: block;">111</div> <div>222</div> <div>333</div> </div> <div id="div2"> <input class="active" type="button" value="1"> <input type="button" value="2"> <input type="button" value="3"> <div style="display: block;">111</div> <div>222</div> <div>333</div> </div> ```