画廊/相册
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
<title>Document</title>
<style type="text/css">
*{
padding: 0;
margin: 0;
}
#list li{
float: left;
list-style: none;
}
#list li a img{
width: 100px;
margin-right: 17px;
}
#big{
margin: 17px 0;
width: 450px;
}
.clearfix:after{
content: "";
display: block;
clear: both;
}
</style>
</head>
<body>
<ul class="clearfix" id="list">
<li><a id="first" href="images/01.png" title="豹女"><img src="images/01.png"></a></li>
<li><a id="second" href="images/02.png" title="发条"><img src="images/02.png"></a></li>
<li><a id="third" href="images/03.png" title="锤石"><img src="images/03.png"></a></li>
<li><a id="fourth" href="images/04.png" title="龙龟"><img src="images/04.png"></a></li>
</ul>
<div>
<img src="images/LOL.png" id="big">
</div>
<p id="text">选择一个图片</p>
<script type="text/javascript">
var aArray = document.getElementById("list").getElementsByTagName("a");
for (var i = 0; i < aArray.length; i++) {
aArray[i].onclick = function () {
document.getElementById("big").src = this.href;
document.getElementById("text").innerText = this.title;
return false;
};
}
</script>
</body>
</html>
