点击小图切换大图

以你之姓@ 2022-02-27 13:54 274阅读 0赞

点击任意一张图片都会变大，并显示在下方指定处。

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

![在这里插入图片描述][watermark_type_ZmFuZ3poZW5naGVpdGk_shadow_10_text_aHR0cHM6Ly9ibG9nLmNzZG4ubmV0L3dlaXhpbl80NDY3NTM4NA_size_16_color_FFFFFF_t_70]

[watermark_type_ZmFuZ3poZW5naGVpdGk_shadow_10_text_aHR0cHM6Ly9ibG9nLmNzZG4ubmV0L3dlaXhpbl80NDY3NTM4NA_size_16_color_FFFFFF_t_70]: /images/20220227/ace2dc5db20448e88b911fbd99971ef2.png