js实现图片走廊

HTML部分

<div class="banner">
        <img src="../public/img/m1.jpg" alt="">
    </div>
    <div class="list">
        <img src="../public/img/m1.jpg" alt="">
        <img src="../public/img/m2.jpg" alt="">
        <img src="../public/img/m3.jpg" alt="">
        <img src="../public/img/m4.jpg" alt="">
        <img src="../public/img/m5.jpg" alt="">
        <img src="../public/img/m6.jpg" alt="">
    </div>

css样式

 * {
            padding: 0;
            margin: 0;
        }
        
        .banner {
            width: fit-content;
            margin: 100px auto 0;
        }
        
        .list {
            width: fit-content;
            margin: 10px auto 0;
        }
        
        .list img {
            width: 100px;
            display: block;
            float: left;
            margin-right: -1px;
        }
        
        .list img.active {
            border: 1px solid red;
        } /* 先设置好边框用的时候添加类名 */

js部分

var bannerSe = document.querySelector(".banner img")
        var imgSeA = document.querySelectorAll(".list img") //获取元素
        for (var i = 0; i < imgSeA.length; i++) {
            imgSeA[i].onclick = function() { //创建点击事件
                var src = this.src //获取点击的图片
                bannerSe.src = src //把点击路径给banner
                for (var j = 0; j < imgSeA.length; j++) {
                    imgSeA[j].classList.remove("active") //把设置边框的类名都删除
                }
                this.classList.add("active") //点击触发时边框类名加上
            }
        }