<!doctype html>
<html>
<head>
<meta charset="utf-8">
<title>无标题文档</title>
<style>
#a{ 520px;
height: 280px;
margin-left: 0px;
margin-top: 0px;
}
#b{ 29px;
height: 52px;
float: left;
margin-left: 0px;
margin-top: 0px;
position: relative;
top: 162px;
left: 0px;
z-index: 2;
background: url(../img/shangyizhang.png) no-repeat;
cursor: pointer;}
#c{ 29px;
height: 52px;
position: relative;
top: -117px;
left: 491px;
z-index: 2;
background: url(../img/xiayizhang.png) no-repeat;
cursor: pointer;}
#A{margin-left: 500px;}
.d{ 15px;
height: 15px;
float: left;
margin-left: 5px;
margin-top: 0px;
border-radius: 50%;
background-color: black;
cursor: pointer;
}
#B{ 100px;
height: 30px;
position: relative;
top: -40px;
left: 200px;}
</style>
<script>
function one (type){
document.getElementById("a").innerHTML ='<img src="img/'+type+'">'
}
var d = 5;
function two (type){
document.getElementById("a").innerHTML = '<img src="img/'+d+'.jpg">';
if(type=='shang'){
d--;
if(d==0){d=5;}
}else if(type == 'xia'){
d++;
if(d==6){d=1;}
}
}
window.onload = function(){
setInterval(
function(){
document.getElementById("a").innerHTML = '<img src="img/'+d+'.jpg">';
d++;
if(d==6){d=1;}
},
4000
)
}
</script>
</head>
<body>
<div id="A">
<button id="b" onClick="two('shang')"></button>
<div id="a"><img src="./img/1.jpg" onMouseOver="three()"></div>
<button id="c" onClick="two('xia')"></button>
<div id="B">
<div class="d" id="e" onClick="one('1.jpg')"></div>
<div class="d" id="f" onClick="one('2.jpg')"></div>
<div class="d" id="g" onClick="one('3.jpg')"></div>
<div class="d" id="h" onClick="one('4.jpg')"></div>
<div class="d" id="i" onClick="one('5.jpg')"></div>
</div>
</div>
</body>
</html>