效果展示：
我是粗略的做做，我相信你可以做的更好
源码：
<!DOCTYPE html>
<html lang="zh-CN">
<head>
<meta charset="UTF-8">
<title>Document</title>
<style>
html,body{margin: 0;padding: 0;}
.box{width: 200px;height:200px;overflow: hidden;display:inline-block}
.box img{width: 100%}
section{width: 500px;min-height: 200px;border: 1px solid #ccc;margin:0 auto;}
</style>
</head>
<body>
<div class="box"><img class="img" src="http://p0.so.qhimgs1.com/t01803337137812cd14.jpg"></div>
<div class="box"><img class="img" src="http://p4.so.qhmsg.com/t016910499743645ab9.jpg"></div>
<div class="box"><img class="img" src="http://p4.so.qhmsg.com/t01b0cc5af3f3d9f539.jpg"></div>
<section>
<img src="" class="img2" width="100%">
</section>
<script>
var img=document.getElementsByClassName("img");
for(var i=0;i<img.length;i++){
img[i].onclick=function(){
document.querySelector(".img2").src=this.src;
}
}
</script>
</body>
</html>
网友评论