JS實現簡易圖片自動輪播
阿新 • • 發佈:2020-10-18
本文例項為大家分享了JS實現簡易圖片自動輪播的具體程式碼,供大家參考,具體內容如下
<!doctype html> <html> <head> <meta charset="utf-8" /> <title>自動播放選項卡</title> <style> *{ margin:0; padding:0; } .box{ width:600px; height:400px; border:1px solid red; margin:100px auto; position:relative; } a{ font-size:40px; position:absolute; text-decoration:none; top:-10px; } #prev{ left:0; } #next{ right:0; } #pos{ margin-left:30px; } input{ width:90px; height:40px; float:left; outline:none; border:0; } .box div{ width:600px; height:400px; background:skyblue; text-align:center; line-height:300px; font-size:100px; font-weight:bold; text-shadow:5px 5px 5px #f90; display:none; } .box .show{ display:block; } .box .active{ width:88px; color:#fff; font-size:18px; font-weight:bold; background:#f90; } </style> <script> window.onload = function() { var oBox = document.getElementById('box'); var oPrev = document.getElementById('prev'); var oNext = document.getElementById('next'); var aBtn = document.getElementsByTagName('input'); var aDiv = oBox.getElementsByTagName('div'); var oNow = 0; for (var i=0;i<aBtn.length;i++) { aBtn[i].dataIndex = i; aBtn[i].onclick = function(){ oNow = this.dataIndex; for (var i=0;i<aBtn.length;i++) { aBtn[i].className = ''; aDiv[i].className = ''; } this.className = 'active'; aDiv[this.dataIndex].className = 'show'; } } oPrev.onclick = prev; oNext.onclick = next; //實現自動播放 var timer = setInterval(next,1000); oBox.onmouseover = function() { clearInterval(timer); } oBox.onmouseout = function() { timer = setInterval(next,1000); } function prev() { oNow--; if (oNow < 0) { oNow = aBtn.length-1; } tab(); } function next() { oNow++; if (oNow > aBtn.length-1) { oNow = 0; } tab(); } function tab() { for (var i=0;i<aBtn.length;i++) { aBtn[i].className = ''; aDiv[i].className = ''; } aBtn[oNow].className = 'active'; aDiv[oNow].className = 'show'; } } </script> </head> <body> <div class="box" id="box"> <a href="javascript:;" id="prev">☜</a> <a href="javascript:;" id="next">☞</a> <input type="button" name="" value="亞洲" class="active" id="pos"/> <input type="button" name="" value="歐洲" /> <input type="button" name="" value="非洲" /> <input type="button" name="" value="北美洲" /> <input type="button" name="" value="南美洲" /> <input type="button" name="" value="大洋洲" /> <div class="show">亞洲</div> <div>歐洲</div> <div>非洲</div> <div>北美洲</div> <div>南美洲</div> <div>大洋洲</div> </div> </body> </html>
展示效果:
精彩專題分享:jQuery圖片輪播 JavaScript圖片輪播 Bootstrap圖片輪播
以上就是本文的全部內容,希望對大家的學習有所幫助,也希望大家多多支援我們。