js-简单相册
做简单相册，点击小图片，下面的图片进行放大
布局为上下分别为两个div
上面一个div内的图片用a标签包含
页面效果为点击上面div的图片下面的图片换成对应的图片
js思路为：
首先分别找到上面
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
<title>相册</title>
<style type="text/css">
.smalldiv{
width:600px;
height: 150px;
border:solid #09d 1px;
margin-bottom: 20px;
margin: auto;
}
.smalldiv img{
width:150px;
height: 100px;
margin:20px;
}
.bigdiv{
width:600px;
height: 300px;
border:solid #09d 1px;
margin:auto auto;
}
.bigdiv img{
display: block;
width:250px;
height:200px;
margin:30px auto;
}
</style>
</head>
<body>
<div id="small" class="smalldiv">
<a href="../img/1.jpg">
<img src="../img/1.jpg"/>
</a>
<a href="../img/2.jpg"/>
<img src="../img/2.jpg">
</a>
<a href="../img/3.jpg">
<img src="../img/3.jpg"/>
</a>
</div>
<div class="bigdiv">
<img id="img" src="../img/4.jpg"/>
</div>
<script type="text/javascript">
var small=document.getElementById('small');
var links=small.getElementsByTagName('a');
var len=links.length;
for(var i=0;i<len;i++){
var link=links[i];
var img=document.getElementById('img');
link.onclick=function(){
img.src=this.href;
return false;
}
}
</script>
</body>
</html>