js写轮播图（左右箭头）

写个人博客时写到了轮播图
先说明未完善的地方：在第一张图片按左键时，不能转到最后一张图片（但最后一张图片按右键时可以转到第一张图片）。
不过一般第一张图片也不需要转到最后一张，所以没大问题。（可以试试遍历图片找到最后一张）

有建议或疑问的话可以在评论区提出

最终效果如下：

html代码：

<div class="loop">
            <div class="arrowBox">
                <div class="leftArrow arrow fl">
                    <i class="fa fa-angle-left"></i>
                </div>
                <div class="rightArrow arrow fr">
                    <i class="fa fa-angle-right"></i>
                </div>
            </div>

            <div class="loopImgBox">
                <img class="loopImg auto-img active" src="./img/210924151Q22644-0-lp.jpg">
                <img class="loopImg auto-img" src="./img/11.webp">
                <img class="loopImg auto-img" src="./img/u=2860398819,482857692&fm=253&fmt=auto&app=138&f=JPEG.webp">
            </div>
        </div>

css代码：

/* 轮播图 start */
.loop {
    
    
    width: 100%;
    height: 569px;
    /* background-color: green; */
    overflow: hidden;
}

.arrowBox {
    
    
    position: absolute;
    top: 0;
    left: 0;
    right: 0;
    bottom: 0;
    margin: auto 25px;
    height: 50px;

}

.arrow {
    
    
    background-color: #fff;
    opacity: 0.3;
    width: 50px;
    height: 50px;
    border-radius: 50%;
    cursor: pointer;
    position: relative;
}

.arrow:hover {
    
    
    opacity: 0.9;
}

.loopImg {
    
    
    display: none;
}

.active {
    
    
    display: block;
}

.arrow i {
    
    
    font-size: 52px;
    color: rgb(49, 49, 49,0.7);
    position: absolute;
    top: -2px;
    left: 16px;
}
/* 轮播图 end */

js代码：

window.onload = function() {
    
    
    var rightArrow = document.querySelector('.rightArrow');
    var leftArrow = document.querySelector('.leftArrow');

    // 主页右箭头
    rightArrow.onclick = function() {
    
    

        for(var i = 0; i < loopImg.length; i ++) {
    
    
            // 给每个图片编号
            loopImg[i].dataset.id = i + 1;
        }

        var active = document.querySelector('.active');

        if (active.dataset.id < loopImg.length) {
    
    
            // 怎么获取下一张图片的节点？
            // var next = document.querySelector('.active+img');
            var next = active.nextElementSibling;
            next.classList.add('active');
            // 把当前图片的.active删除
            active.classList.remove('active');
        } else {
    
    
            var first = document.querySelector("img[data-id='1']");
            first.classList.add('active');
            active.classList.remove('active');
        }

        for(var i = 0; i < loopImg.length; i ++) {
    
    
            // 移除图片编号
            loopImg[i].removeAttribute('data-id');
        }
       
    }

    // 主页左箭头
    leftArrow.onclick = function() {
    
    

        for(var i = 0; i < loopImg.length; i ++) {
    
    
            // 给每个图片编号
            loopImg[i].dataset.id = i + 1;
        }

        var active = document.querySelector('.active');

        // if (active.dataset.id > 1) {
    
    
            // 怎么获取上一张图片的节点？
            var before = active.previousElementSibling;
            before.classList.add('active');
            // 把当前图片的.active删除
            active.classList.remove('active');
        // } else {
    
    

            // 获取不了最后一个兄弟元素，所以第一张图片不能转到最后一张
            // var last = 
            // console.log(last);
            // last.classList.add('active');
            // active.classList.remove('active');
        // }

        for(var i = 0; i < loopImg.length; i ++) {
    
    
            // 移除图片编号
            loopImg[i].removeAttribute('data-id');
        }
       
    }
}

后续有时间会完善轮播图：点击小圆圈跳转到指定图片，并且点击左右键跳转图片时小圆圈的显示也会随之变化。如下图：

结束