第3题
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
<title>Title</title>
<style>
.scroll{width: 360px; height: 190px; overflow: hidden; margin: 0 auto; position: relative;}
a{
font-size: 14px;
color: #39F;
height: 18px;
width: 20px;
border: 1px solid #39F;
text-decoration: none;
display: block;
float: left;
margin-right:5px;
text-align: center;
background-color: #FFF;
line-height: 20px;
}
a:hover {
font-size: 14px;
font-weight: bold;
color: #FFF;
background-color: #39F;
border: 1px solid #39F;
text-decoration: none;
display: block;
}
#num {
position:absolute;
width:180px;
height:25px;
z-index:2;
left:110px;
top: 160px;
}
</style>
</head>
<body>
<div class="scroll">
<div id="num">
<a href="#" οnclick="rep1()">1</a>
<a href="#" οnclick="rep2()">2</a>
<a href="#" οnclick="rep3()">3</a>
<a href="#" οnclick="rep4()">4</a>
<a href="#" οnclick="rep5()">5</a>
</div>
<img src="images/1.gif" alt="图片" id="photo"/>
</div>
</body>
</html>
<script type="text/javascript">
function rep1() {
var oldNode = document.getElementById("photo");
oldNode.setAttribute("src","images/1.gif")
}
function rep2() {
var oldNode = document.getElementById("photo");
oldNode.setAttribute("src","images/2.gif")
}
function rep3() {
var oldNode = document.getElementById("photo");
oldNode.setAttribute("src","images/3.jpg")
}
function rep4() {
var oldNode = document.getElementById("photo");
oldNode.setAttribute("src","images/4.jpg")
}
function rep5() {
var oldNode = document.getElementById("photo");
oldNode.setAttribute("src","images/5.gif")
}
</script>
第4题