用js写图片切换

最新推荐文章于 2023-08-29 19:44:57 发布

写代码的机器猫

最新推荐文章于 2023-08-29 19:44:57 发布

阅读量418

点赞数 1

文章标签： javascript html css

本文链接：https://blog.csdn.net/m0_63338784/article/details/129940216

版权

<!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/movie1.jpg" alt="">
        </div>
        <div class="lt">
            <img src="./img/movie1.jpg" alt="">
            <img src="./img/movie2.jpg" alt="">
            <img src="./img/movie3.jpg" alt="">
            <img src="./img/movie1.jpg" alt="">
            <img src="./img/movie5.jpg" alt="">
            
        </div>
    </div>
    <script>
        //大图
        let _gtImg=document.querySelector(".gt>img");
        //小缩略图
        let _images=document.querySelectorAll(".lt>img");
        _images.forEach(_image=>{
            _image.onclick=function(){
               // 点击当前小图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>