效果:
每一秒向后跳转一个选项卡,鼠标移入块中则停止移动,否则自动继续移动
实现代码:
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
<title>Document</title>
</head>
<style type="text/css">
#box{
width:800px;
height: 500px;
border: 1px solid tomato;
margin:0 auto;
margin-top:50px;
border-radius:10px;
background:#ccc;
}
input{
width: 80px;
height: 50px;
border: 1px;
margin-left: 120px;
margin-top: 10px;
}
#box input{
width:10px;
height:10px;
border-radius:2px;
}
#box div{
margin:30px 30px 0px 50px;
width: 700px;
height: 400px;
border: 1px solid #ccc;
line-height: 200px;
display:none;
}
#box div img{
width: 700px;
height: 400px;
}
#box .active{
background:tomato;
}
#box .display{
display:block;
}
</style>
<body>
<div id="box">
<input class="active" type="button" value=""></input>
<input type="button" value=""></input>
<input type="button" value=""></input>
<input type="button" value=""></input>
<div class="display"><img src="images/ad1.jpg" /></div>
<div><img src="images/ad2.jpg" /></div>
<div><img src="images/ad3.jpg" /></div>
<div><img src="images/ad4.jpg" /></div>
</div>
<script>
window.onload = function()
{
var oBtn = document.getElementsByTagName('input');
var oBox = document.getElementById('box');
var oDiv = oBox.getElementsByTagName('div'); //取oBox下的div
var iNow = 0;
for(var i = 0;i < oBtn.length;i++){
oBtn[i].index = i;
oBtn[i].onclick = function()
{
for (var j = 0;j < oBtn.length;j++) {
oBtn[j].className = '';
oDiv[j].className = '';
}
this.className = 'active';
iNow = this.index;
oDiv[this.index].className = 'display';
}
}
var timer = setInterval(next,3000);
oBox.onmouseover = function() //停止和开始都是与大Box有关的
{
clearInterval(timer);
}
oBox.onmouseout = function()
{
timer = setInterval(next,3000);
}
var oPrev = document.getElementById('prev');
var oNext = document.getElementById('next');
oPrev.onclick = prev;
oNext.onclick = next;
function prev ()
{
iNow--;
if (iNow == -1){
iNow = oBtn.length - 1;
}
tab();
}
function next()
{
iNow++;
if (iNow == oBtn.length){
iNow = 0;
}
tab();
}
function tab(){
for (var i =0;i<oBtn.length;i++){
oBtn[i].className = '';
oDiv[i].className = '';
}
oBtn[iNow].className = 'active';
oDiv[iNow].className = 'display';
}
}
</script>
</body>
</html>