CSS+JS 实现--点击切换轮播图（简单小程序）

谁借莪１个温暖的怀抱￠ 2022-12-10 07:05 202阅读 0赞

先上效果图，看你们想i要的是不是这个效果

![20200924123558520.gif][]

话不多说，代码附上

<!DOCTYPE html>
    <html lang="en">
    <head>
        <meta charset="UTF-8">
        <meta name="viewport" content="width=device-width, initial-scale=1.0">
        <title>Document</title>
        <style>
            *{
                margin: 0;
                padding: 0;
            }
            .picture{
                width: 1200px;
            }
            #banner{
                display: flex;
                margin-left: 0px;
                transition: all .5s;
            }
            .view{
                border: 5px solid black;
                width: 1200px;
                overflow: hidden;
            }
            .small-box{
                display: flex;
            }
            .small-box img{
                width: 390px;
                margin: 5px;
            }
            .box{
                width: 1200px;
                margin: 0 auto;
            }
        </style>
    </head>
    <body>
        <div class="box">
            <div class="view">
                <div id="banner">
                    <img src="images/a.webp" alt="" class="picture">
                    <img src="images/b.webp" alt="" class="picture">
                    <img src="images/c.webp" alt="" class="picture">
                </div>
            </div>
            <div class="small-box">
                <img class="small" src="images/a.webp" alt="">
                <img class="small" src="images/b.webp" alt="">
                <img class="small" src="images/c.webp" alt="">
            </div>
        </div>
        
    </body>
    <script>
        //id
        var banner=document.getElementById("banner");
        //缩略图 类名
        var smalls=document.getElementsByClassName("small");
        //初始化 默认状态
        smalls[0].style.boxShadow="0 10px 20px #666";
        //记录有投影的缩略图的索引
        var x=0;
    
        //绑定点击事件
        for(var i=0;i<smalls.length;i++){
            //自动以索引属性 记录每个DOM对象的编号
            smalls[i].index=i;
            smalls[i].onclick=function(){
                // alert(i);
    
                // alert(this.index);
                //q取消上一个上一个缩略图的投影
                smalls[x].style.boxShadow="none";
                //给当前点击的缩略图设置缩影
                this.style.boxShadow="0 10px 20px #666";
                //记录
                x=this.index;
                //切换大图
                banner.style.marginLeft=-1200*this.index+"px";
            }
        }
    </script>
    </html>

[20200924123558520.gif]: /images/20221123/e1965aed9580440893775871e0ad371c.png