原生JS案例——相册大小图

最新推荐文章于 2023-02-20 16:26:24 发布

h_jQuery

最新推荐文章于 2023-02-20 16:26:24 发布

阅读量349

点赞数

分类专栏： javascript HTML5 dom 文章标签： js javascript jquery dom css

本文链接：https://blog.csdn.net/h_jQuery/article/details/118605998

版权

javascript 同时被 3 个专栏收录

124 篇文章

订阅专栏

HTML5

22 篇文章

订阅专栏

dom

1 篇文章

订阅专栏

本文介绍了一个HTML页面中，如何通过JavaScript实现小图片点击后动态替换大图片的功能，展示了前端开发中基本的DOM操作和事件监听。

摘要生成于 C知道，由 DeepSeek-R1 满血版支持，前往体验 >

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

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

<body>
    <div>
        <img src="./img/ju.jpg" alt="" class="big" id="pic">
    </div>
    <div>
        <img class="small" src="./img/ju.jpg" alt="">
        <img class="small" src="./img/ying.jpg" alt="">
        <img class="small" src="./img/hu.jpg" alt="">
        <img class="small" src="./img/bu.jpg" alt="">
    </div>

    <script>
        // 先获取到小图元素数组，然后循环，点击某个小图，绑定点击事件，然后获取到该元素的src属性值，再获取大图的src属性，将小图的src属性值赋给大图的src属性值
        var simg = document.getElementsByClassName('small');
        // 只有一个big，不能使用类名来获取，这样获取不来属性
        // var bimg = document.getElementsByClassName('big');
        var bimg = document.getElementById('pic');
        // 因为小图有多个,所以要循环
        for (var i = 0; i < simg.length; i++) {
            simg[i].onclick = function() {
                var ssrc = this.attributes[1].value;
                bimg.attributes[0].value = ssrc;
                // console.log(ssrc);
            }
        }
        /*
		// 获取到所有的img元素
        // 图片元素.src=''
        let imgs = document.getElementsByTagName('img');
        // i从1开始，是只循环小图，
        for (let i = 1; i < imgs.length; i++) {
            // 鼠标经过小图时，大图src属性也随之改变成小图的src属性
            imgs[i].onmouseover = function() {
                imgs[0].src = this.src
            }
        }
		*/
    </script>

</body>

</html>

效果图：
在这里插入图片描述