用js做随机切换功能

最新推荐文章于 2024-05-09 11:16:38 发布

香香爱编程

最新推荐文章于 2024-05-09 11:16:38 发布

阅读量370

点赞数 8

文章标签：前端 javascript css

本文链接：https://blog.csdn.net/2302_79245293/article/details/135512931

版权

样式

 <style>
           .wrap{
            display: flex;
            position: absolute;
            z-index: 1;
            width: 900px;
           

        }
        
        .wrap img{
            width: 100%;
            height: 100%;
            
        }
        .wrap1 img{
            width: 100%;
            position: absolute;
            /* display: none; */
        }
       .wrap1 .one{
        display: block;
       }
       .wrap1>div{
        display: none;
       }
    </style>

html

 <div class="wrap">
        <div><img src="../PIC/1.png" alt=""></div>
        <div><img src="../PIC/2.png" alt=""></div>
        <div><img src="../PIC/3.png" alt=""></div>
        <div><img src="../PIC/2.png" alt=""></div>
    </div>
    <div class="wrap1">
        <div class="one"><img src="../PIC/1.png" alt=""></div>
        <div><img src="../PIC/2.png" alt=""></div>
        <div><img src="../PIC/3.png" alt=""></div>
        <div><img src="../PIC/2.png" alt=""></div>
    </div>

 <script>

        const wrap=document.querySelectorAll('.wrap>div')       
        const wrap1=document.querySelectorAll('.wrap1>div')
        for(let i=0;i<wrap.length;i++){
            wrap[i].addEventListener('click',function(){
               document.querySelector('.one').classList.remove('one')
               wrap1[i].classList.add('one')
            })
        }
    </script>

效果