JS实现简易图片自动轮播

时间：2021-05-26

本文实例为大家分享了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图片轮播

以上就是本文的全部内容，希望对大家的学习有所帮助，也希望大家多多支持。

声明：本页内容来源网络，仅供用户参考；我单位不保证亦不表示资料全面及准确无误，也不保证亦不表示这些资料为最新信息，如因任何原因，本网内容或者用户因倚赖本网内容造成任何损失或损害，我单位将不会负任何法律责任。如涉及版权问题，请提交至online#300.cn邮箱联系删除。

相关文章