模仿商城切换图片
<!DOCTYPE html> <html> <head> <meta charset="utf-8"> <title></title> <style type="text/css"> *{ margin: 0; padding: 0; } .box,.showMove{ width: 500px; height: 500px; } .box img { width: 500px; height: 500px; } .showMove img{ width: 125px; float: left; height: 125px; box-sizing: border-box; } .showMove img:hover{ border: 3px solid #A9A9A9; } </style> <script type="text/javascript"> window.onload = function(){ //拿到小图片 var minImg = document.querySelectorAll(".showMove img"); //拿到展示的图片 var BigImg = document.querySelectorAll(".box img")[0]; var len = minImg.length; for(let i = 0;i < len; i++){ minImg[i].onmouseover = function(){ //拿到当前this.src BigImg.src = this.src; } } } </script> </head> <body> <div class="box"> <img src="https://img1.baidu.com/it/u=2420900500,3687847215&fm=253&fmt=auto&app=138&f=JPEG?w=500&h=281" alt=""> </div> <div class="showMove"> <img src="https://img1.baidu.com/it/u=2420900500,3687847215&fm=253&fmt=auto&app=138&f=JPEG?w=500&h=281" alt=""> <img src="https://img1.baidu.com/it/u=2734654648,1667341985&fm=253&fmt=auto&app=138&f=JPEG?w=333&h=500" alt=""> <img src="https://img0.baidu.com/it/u=1857113315,65477864&fm=253&fmt=auto&app=120&f=JPEG?w=500&h=400" alt=""> <img src="https://img1.baidu.com/it/u=4105640961,731354368&fm=253&fmt=auto&app=138&f=JPEG?w=500&h=313" alt=""> </div> </body> </html>