image.png

CSS部分

* {
            padding: 0;
            margin: 0;
        }
        body>div {
            display: flex;
        }
        #ul1 {
            width: 360px;
            height: 600px;
            display: flex;
            flex-wrap: wrap;
            list-style: none;
            align-items: flex-end;
        }
        #ul2 {
            display: flex;
            flex-wrap: wrap;
            width: 240px;
            height: 600px;
            list-style: none;
            align-items: flex-end;
        }
        #box {
            width: 340px;
            height: 400px;
            /* background: aqua; */
        }

        li>img {
            display: block;
            width: 100px;
            height: 100px;
            margin: 0 10px;
        }
        .newImg {
            width: 340px;
        }

html部分

 <div>
        <ul id="ul1">
            <img src="./預習/img/1.jpg" alt="" id="box">
            <li><img src="./預習/img/1.jpg" alt=" " class="img"></li>
            <li><img src="./預習/img/2.jpg" alt=" " class="img"></li>
            <li><img src="./預習/img/3.jpg" alt="" class="img"></li>
        </ul>
        <ul id="ul2">
            <li><img src="./預習/img/4.jpg" alt="" class="img"></li>
            <li><img src="./預習/img/5.jpg" alt="" class="img"></li>
            <li><img src="./預習/img/6.jpg" alt="" class="img"></li>
            <li><img src="./預習/img/7.jpg" alt="" class="img"></li>
            <li><img src="./預習/img/8.jpg" alt="" class="img"></li>
            <li><img src="./預習/img/9.jpg" alt="" class="img"></li>
            <li><img src="./預習/img/10.jpg" alt="" class="img"></li>
            <li><img src="./預習/img/11.png" alt="" class="img"></li>
        </ul>

JS部分

window.onload=function(){
            var oBox=document.getElementById("box");
        var oImgs=document.querySelectorAll("img");

        oImgs.forEach(function(item,index){
            item.onclick=function(){
                oBox.src=this.src;
                //oPic.setAttribute("src",this.getAttribute("src"));
            }
        })
        }