``` <style> .big{ width: 415px; height: 400px; } .small>img{ width: 100px; height: 100px; } </style> <div> <img src="./ju.jpg" alt="" class="big"> </div> <div class="small"> <img src="./ju.jpg" alt=""> <img src="./ying.jpg" alt=""> <img src="./hu.jpg" alt=""> <img src="./bu.jpg" alt=""> </div> <script> // 邏輯：本質上，把小圖的src 賦值給 大圖的src // 圖片元素.src = '' let imgs = document.getElementsByTagName('img'); for(let i=1;i<imgs.length;i++){ imgs[i].onmouseover = function(){ // 把當前小圖的src給 到大圖src imgs[0].src = this.src; } } </script> ``` 效果圖：