简单图片的切换+高亮设置

m0_63448468

已于 2023-10-07 17:35:45 修改

阅读量82

点赞数

文章标签：前端

于 2023-10-07 14:39:51 首次发布

本文链接：https://blog.csdn.net/m0_63448468/article/details/133639197

版权

实现效果：

实现代码：

<!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>
        .small-img{
            height: 100px;
        }

    </style>

</head>

<body>
    <div>
        <img class="big-img" width="300px" height="200px" src="01.jpg" alt="">
    </div>
    <div>
        <img class="samll-img" onclick="clickImg('01.jpg')" width="100px" height="60px" src="01.jpg" alt="">
        <img class="samll-img" onclick="clickImg('02.jpg')" width="100px" height="60px" src="02.jpg" alt="">
        <img class="samll-img" onclick="clickImg('03.jpg')" width="100px" height="60px" src="03.jpg" alt="">
        <img class="samll-img" onclick="clickImg('04.jpg')" width="100px" height="60px" src="04.jpg" alt="">
    </div>
    <script>
        function clickImg(imgsrc){
            let bigImgEle=document.querySelector(".big-img")
            bigImgEle.setAttribute("src",imgsrc)
        }
    </script>

</body>
</html>

追加：对点击图片进行高亮设置

实现效果：

实现代码：

<!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>
        .small-img{
            height: 100px;
        }
        .active{
            border: 2px solid black;
        }
    </style>

</head>

<body>
    <div>
        <img class="big-img" width="300px" height="200px" src="01.jpg" alt="">
    </div>
    <div>
        <!-- 必须有一个active标签才能把代码运行起来 -->
        <img class="samll-img img1 active" onclick="clickImg('01.jpg','.img1')" width="100px" height="60px" src="01.jpg" alt="">
        <img class="samll-img img2" onclick="clickImg('02.jpg','.img2')" width="100px" height="60px" src="02.jpg" alt="">
        <img class="samll-img img3" onclick="clickImg('03.jpg','.img3')" width="100px" height="60px" src="03.jpg" alt="">
        <img class="samll-img img4" onclick="clickImg('04.jpg','.img4')" width="100px" height="60px" src="04.jpg" alt="">
    </div>
    <script>
        function clickImg(imgsrc,imgclass){
            let bigImgEle=document.querySelector(".big-img");
            bigImgEle.setAttribute("src",imgsrc);

            // 下面是高亮样式代码

            let highLight=document.querySelector(".active");

            // 判断当前标签对象的class属性是否包含指定的class类名
            console.log(highLight.classList.contains("active"));

            // 删除当前标签对象的class属性值中指定的class类名
            highLight.classList.remove("active");


            let currenImg=document.querySelector(imgclass);

            // 在当前标签对象的class属性值后面添加指定的class类名
            currenImg.classList.add("active");
        }
    </script>

</body>
</html>