封装 自动播放选项卡
<!DOCTYPE html> <html> <head> <meta charset="UTF-8"> <title>自动播放选项卡</title> <style> * { margin: 0; padding: 0; } #box,#box2,#box3,#box4 { width: 500px; height: 400px; border: 1px solid #000; border-radius: 8px; text-align: center; padding-top: 10px; margin: 30px; float: left; } a { text-decoration: none; font-size: 40px; } .inp input { width: 100px; height: 40px; font-size: 18px; font-weight: bold; outline: none; background: #ccc; } .inp .active { width: 100px; height: 40px; font-size: 18px; font-weight: bold; outline: none; background: #f50; } .body div { width: 450px; height: 300px; text-align: center; line-height: 300px; font-size: 100px; font-weight: bold; margin: 0 auto; background: #f90; border-radius: 8px; margin-top: 30px; display: none; } .body div.show { display: block; } </style> <script src="jquery-3.2.1.min.js"></script> <script> $(function () { function likTabAuto(oBoxId){ var oBox = $('#'+oBoxId); var aBtn = oBox.find('.inp input'); var aDiv = oBox.find('.body div'); var iNow = 0; var timer = null; for(var i = 0; i < aBtn.length; i++) { aBtn[i].index = i; aBtn[i].onclick = function() { for(var i = 0; i < aBtn.length; i++) { aBtn[i].className = ''; aDiv[i].className = ''; } iNow = this.index; this.className = 'active'; aDiv[this.index].className = 'show'; } } function tab() { for(var i = 0; i < aBtn.length; i++) { aBtn[i].className = ''; aDiv[i].className = ''; } aBtn[iNow].className = 'active'; aDiv[iNow].className = 'show'; } function next() { iNow++; if(iNow == aBtn.length) { iNow = 0; } tab(); } timer = setInterval(next, 1000); oBox.hover(function () { clearInterval(timer); }, function () { timer = setInterval(next, 1000); }); } likTabAuto('box'); likTabAuto('box2'); likTabAuto('box3'); likTabAuto('box4'); }); </script> </head> <body> <div id="box"> <div class="inp"> <input type="button" value="你好" class="active" /> <input type="button" value="再见" /> <input type="button" value="不送" /> </div> <div class="body"> <div class="show">你好</div> <div>再见</div> <div>不送</div> </div> </div> <div id="box2"> <div class="inp"> <input type="button" value="你好" class="active" /> <input type="button" value="再见" /> <input type="button" value="不送" /> </div> <div class="body"> <div class="show">你好</div> <div>再见</div> <div>不送</div> </div> </div> <div id="box3"> <div class="inp"> <input type="button" value="你好" class="active" /> <input type="button" value="再见" /> <input type="button" value="不送" /> </div> <div class="body"> <div class="show">你好</div> <div>再见</div> <div>不送</div> </div> </div> <div id="box4"> <div class="inp"> <input type="button" value="你好" class="active" /> <input type="button" value="再见" /> <input type="button" value="不送" /> </div> <div class="body"> <div class="show">你好</div> <div>再见</div> <div>不送</div> </div> </div> </body> </html>
author:Lik
Endeavoring to powerless, struggling to move yourself.
Endeavoring to powerless, struggling to move yourself.