本篇文章給大家分享的是有關使用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>以上就是使用JS實現簡易圖片自動輪播，小編相信有部分知識點可能是我們日常工作會見到或用到的。希望你能通過這篇文章學到更多知識。更多詳情敬請關注億速云行業資訊頻道。
免責聲明：本站發布的內容（圖片、視頻和文字）以原創、轉載和分享為主，文章觀點不代表本網站立場，如果涉及侵權請聯系站長郵箱：is@yisu.com進行舉報，并提供相關證據，一經查實，將立刻刪除涉嫌侵權內容。
