原生js面向物件程式設計-選項卡(自動輪播)
阿新 • • 發佈：2018-11-02
<!DOCTYPE html> <html> <head lang="en"> <meta charset="UTF-8"> <title>原生js面向物件程式設計-選項卡(自動輪播)</title> <style> #div1 div{ width:400px; height:300px; border:1px solid #ccc; overflow: hidden; display: none; margin: 15px 0; } #div1 input{ color: #fff; width:100px; height:40px; background: darkseagreen; border:none; font-size: 14px; letter-spacing: 5px; } #div1 p{ font-size: 20px; line-height: 24px; text-align: center; color:darkgreen; } #div1 .title{ padding: 0; font-weight: bold; } #div1 .active{ background:sandybrown; color:#fff; } </style> </head> <body> <div id="div1"> <input class="active" type="button" value="五言律詩"> <input type="button" value="七言律詩"> <input type="button" value="五言絕句"> <input type="button" value="七言絕句"> <div style="display: block;"> <p class="title">落 花</p> <p class="author">李商隱</p> <p>高閣客竟去，小園花亂飛。</p> <p>參差連曲陌，迢遞送斜暉。</p> <p>腸斷未忍掃，眼穿仍欲歸。</p> <p>芳心向春盡，所得是沾衣。</p> </div> <div> <p class="title">蜀 相</p> <p class="author">杜甫</p> <p>丞相祠堂何處尋，錦官城外柏森森。</p> <p>映階碧草自春色，隔葉黃鸝空好音。</p> <p>三顧頻煩天下計，兩朝開濟老臣心。</p> <p>出師未捷身先死，長使英雄淚滿襟。</p> </div> <div> <p class="title">八陣圖</p> <p class="author">杜甫</p> <p>功蓋三分國，名成八陣圖。</p> <p>江流石不轉，遺恨失吞吳。</p> </div> <div> <p class="title">泊秦淮</p> <p class="author">杜牧</p> <p>煙籠寒水月籠沙，夜泊秦淮近酒家。</p> <p>商女不知亡國恨，隔江猶唱後庭花。</p> </div> </div> <script type="text/javascript"> window.onload = function(){ function Tab(id){ this.wrap = document.getElementById(id); this.inp = this.wrap.getElementsByTagName('input'); this.div = this.wrap.getElementsByTagName('div'); this.num = 0; this.timer = null; } Tab.prototype = { constructor : Tab, init : function(){ var This = this; this.auto(); this.wrap.onmouseover = function(){ clearInterval(This.timer); }; this.wrap.onmouseout = function(){ This.auto(); }; }, auto:function(){ var _this = this; this.timer = setInterval(function(){ _this.num ++; _this.num %= _this.inp.length; for(var i=0;i<_this.inp.length;i++){ _this.inp[i].className = ''; _this.div[i].style.display = 'none'; } _this.inp[_this.num].className = 'active'; _this.div[_this.num].style.display = 'block'; },2000); } } var t = new Tab('div1'); t.init(); } </script> </body> </html>