js案例2-美女相册

效果展示：

我是粗略的做做，我相信你可以做的更好

源码：

<!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>

js案例2-美女相册

推荐阅读更多精彩内容