<!DOCTYPE html>
<html lang="zh">
<head>
<meta charset="UTF-8" />
<meta name="viewport" content="width=device-width, initial-scale=1.0" />
<meta http-equiv="X-UA-Compatible" content="ie=edge" />
<title>Document</title>
<style>
a{font-size: 20px;background-color: #EE0000;color: #ffffff;width: 20px;text-decoration: none;}
</style>
<script>
var nowShow=2;
function show(index){
if(Number(index)){
clearTimeout(sid);
nowShow=index;
}
for(var i=1;i<5;i++){
//分别显示、隐藏对应图像
if(i==nowShow){
document.getElementById("img"+nowShow).style.display="block";
}else{
document.getElementById("img"+i).style.display="none";
}
}
//设置下一个图像
if(nowShow==4){
nowShow=1;
}else{
nowShow++;
}
sid=setTimeout('show()',3000);
}
</script>
</head>
<body onload="show()">
<div style="position:absolute;left: 60px;top:60px;">
<img id="img1" src="img/banner1.jpg" style="display:none;" border="1" width="200px" height="200px"/>
<img id="img2" src="img/banner2.jpg" style="display:none;" border="1" width="200px" height="200px"/>
<img id="img3" src="img/banner3.jpg" style="display:none;" border="1" width="200px" height="200px"/>
<img id="img4" src="img/banner4.jpg" style="display: none; border="1" width="200px" height="200px">
</div>
<div style="position:absolute;left:200px;top:230px;" align="center>
<a href="javascript:show(1)">1</a>
<a href="javascript:show(2)">2</a>
<a href="javascript:show(3)">3</a>
<a href="javascript:show(4)">4</a>
</div>
</body>
</html>
