图片切换效果

原ℳ来

已于 2023-04-03 20:56:19 修改

阅读量90

点赞数

文章标签： css html css3

于 2023-04-03 20:51:41 首次发布

本文链接：https://blog.csdn.net/weixin_52983838/article/details/129939298

版权

<!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>
        .wrapper{
            width: 300px;
        }
        .gt img{
            width: 300px;
            height: 300px;
        }
        .lt{
            display:flex;
        }
        .lt img{
            width: 50px;
            height: 50px;
            border: 1px solid red;
            padding: 5px;
        }
    </style>
</head>
<body>
    <div class="wrapper">
        <div class="gt">
            <img src="./img/1.jpg" alt="">
        </div>
        <div class="lt">
            <img src="./img/1.jpg" alt="">
            <img src="./img/2.jpg" alt="">
            <img src="./img/4.avif" alt="">
            <img src="./img/5.avif" alt="">
            <img src="./img/pic3.png" alt="">
        </div>
    </div>
    <script>
        //大图
        let _gtImg=document.querySelector('.gt>img');
        //小缩略图
        let _images=document.querySelectorAll(".lt>img");
        _images.forEach(_image=>{
            // 点击当前小图img，大图img的src与小图一致
            _image.onclick=function(){
               _gtImg.src=this.src;
            }
            // 悬浮加边框
            _image.onmouseover=function(){
               this.style.border='1px solid green';
            }
            // 离开恢复原样式
            _image.onmouseout=function(){
               this.style.border="1px solid red";
            }
        })
    </script>
</body>
</html>