模仿商城切换图片 

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

 

posted @ 2022-03-29 11:38  st-159  阅读(22)  评论(0)    收藏  举报