每天一个js小demo--相册

Laohei0101

于 2021-11-11 22:18:06 发布

阅读量888

点赞数

分类专栏：前端文章标签： javascript css3 前端

本文链接：https://blog.csdn.net/Laohei0101/article/details/121277781

版权

前端专栏收录该内容

31 篇文章 1 订阅

订阅专栏

直接上图
在这里插入图片描述
当鼠标移动到下面的小图片的时候，上面的大图就会显示对应的下面的图片

直接上代码

<style>
    .big {
        width: 415px;
        height: 400px;
    }

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

<body>
    <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给大图

        //先获取到所有的img标签
        let img = document.querySelectorAll("img")

        //对所有的img标签进行遍历
        for (let i = 0; i < img.length; i++) {
            //当点击哪一个图片的时候，就把第一张大图的图片地址变成当前这张图片的地址
            img[i].onmouseover = function () {
                img[0].src = this.src;
            }
        }
    </script>
</body>

Laohei0101

关注

0
点赞
踩
0

收藏

觉得还不错? 一键收藏
0
评论
每天一个js小demo--相册

直接上图当鼠标移动到下面的小图片的时候，上面的大图就会显示对应的下面的图片直接上代码<style> .big { width: 415px; height: 400px; } .small>img { width: 100px; height: 100px; }</style><body> <div> <img s
复制链接

扫一扫