利用js来选择图片

最新推荐文章于 2026-04-29 16:38:30 发布

原创最新推荐文章于 2026-04-29 16:38:30 发布 · 911 阅读

0 ·

本内容遵循CC 4.0 BY-SA版权协议

标签

#javascript #html #css

周记生活同时被 2 个专栏收录

30 篇文章

订阅专栏

小玩意儿

4 篇文章

订阅专栏

当鼠标悬停在小图片上时，代码会将小图片的src赋值给大图片，从而在大图片区域展示相应的放大图像。这个效果主要依赖于JavaScript的鼠标移入移出事件处理和HTML结构。

功能：

当鼠标经过一张小的图片的时候，上面展现出对应的大图片，效果如下。

用到的知识点比较少，主要是鼠标经过事件，经过哪一张图片，将对应图片的src赋值给上面大盒子里面图片的src 地址值

上代码：

<!DOCTYPE html>
<html lang="en">

<head>
    <meta charset="UTF-8">
    <meta http-equiv="X-UA-Compatible" content="IE=edge">
    <meta name="viewport" content="width=device-width, initial-scale=1.0">
    <title>Document</title>
    <style>
        .big {
            height: 624px;
            width: 624px;
        }

        .small>img {
            width: 100px;
            height: 100px;
        }
    </style>
</head>

<body>
    <div>
        <img src="./img/QQ图片20230415084047.jpg" alt="" class="big">

    </div>
    <div class="small">
        <img src="./img/QQ图片20230415084047.jpg" alt="">
        <img src="./img/QQ图片20230415084115.jpg" alt="">
        <img src="./img/QQ图片20230415084119.jpg" alt="">
        <img src="./img/QQ图片20230415084123.jpg" alt="">
        <img src="./img/QQ图片20230415084127.jpg" alt="">
        <img src="./img/QQ图片20230415084132.jpg" alt="">
    </div>
    <script>
        //逻辑：本质是，放到那个图片上面，就是将小图的src赋值给大图的src
        //鼠标的移入移除事件
        let imgs = document.querySelectorAll('img');
        for (let i = 0; i < imgs.length; i++) {
            imgs[i].onmouseover = function () {
                //把小图的src赋值给大图的src
                imgs[0].src = this.src;
            }
        }
    </script>
</body>

</html>

快去试试吧🦄

如果想要图片可以留言，后台踢我呦😉~~~