<!DOCTYPE html> <html> <head> <title></title> <style type="text/css"> *{padding: 0px;margin: 0px;} div { width: 670px; border: 1px solid red; margin: 100px auto; } ul { list-style: none; display: flex; justify-content: space-between; } ul>li>img { width: 120px; vertical-align: bottom; } </style> </head> <body> <div> <img src="images/ad1.jpg" alt=""> <ul> <li><img src="images/ad1.jpg" alt=""></li> <li><img src="images/ad2.jpg" alt=""></li> <li><img src="images/ad3.jpg" alt=""></li> <li><img src="images/ad4.jpg" alt=""></li> <li><img src="images/ad5.jpg" alt=""></li> </ul> </div> <script type="text/javascript"> let oImg = document.querySelector("div>img"); let oItems = document.querySelectorAll("li>img"); for(let item of oItems) { item.onclick=change; //执行点击事件后执行change方法。 } function change() {//然后把li里面的img赋值给div>img。 oImg.src=this.src;//就行了 } </script> </body> </html>
dom啦11 图片展示 核心：在于点击li＞img里面的哪一个就把this.src赋值给div＞img的src
关注
打赏
