点击小图切换大图

点击任意一张图片都会变大，并显示在下方指定处。
<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <title>$美少女战士$</title>
    <style>
        img:nth-of-type(-n+4) {
            border-radius: 50%;
            width: 200px;
            height: 200px;
            float: left;
        }
    </style>
</head>
<body>
<img src="1.jpg" alt="">
<img src="2.jpg" alt="">
<img src="3.jpg" alt="">
<img src="l.jpg" alt="">
<div style="clear: both"></div>
<img src="placeholder.png" alt=""  class="place">
<script>
    window.onload = function () {
        /*创建一个onload函数
        * */
        var imgs = document.querySelectorAll('img:nth-of-type(-n+4)');
        console.log(imgs)
        // 获取文档中四张图片 img="" 的元素：
        var placeHodler = document.querySelector('.place');
        // 获取文档中class=".place" 的第一个元素:

        for(var i = 0;i<imgs.length;i++){  // 没点击之前 i===4
            // 点击之后 才执行 function(){}
            imgs[i].onclick = function () {
                //创建一个点击函数（对象）
                var luJing  = this.src;  // ?imgs[4].src;
                console.log(luJing)
                //4: 这个对象身上的src 地址
                //5: 获取的地址 赋值  默认图片 src
                placeHodler.style.width = '400px'
                placeHodler.style.height = '400px'
                placeHodler.src = luJing ;
            }
        }
    }
</script>
</body>
</html>
点击小图切换大图