html5时间线图片自动轮播,JS实现简易图片自动轮播

本文实例为大家分享了JS实现简易图片自动轮播的具体代码，供大家参考，具体内容如下

自动播放选项卡

*{

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;

}

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[i].dataIndex = i;

aBtn[i].onclick = function(){

oNow = this.dataIndex;

for (var i=0;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[i].className = '';

aDiv[i].className = '';

}

aBtn[oNow].className = 'active';

aDiv[oNow].className = 'show';

}

}

☜

☞

亚洲

欧洲

非洲

北美洲

南美洲

大洋洲

展示效果：

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