轮换图

https://blog.csdn.net/q908555281/article/details/70314080
 <div id="banner">
        <div class="list_img" id="list_img">
            <img src="img/1.png">
            <img src="img/2.png">
            <img src="img/3.png">
        </div>
        <div class="icon_img" id="nav">
            <span index="1"><a class="current"></a></span>
            <span index="2"><a></a></span>
            <span index="3"><a></a></span>
        </div>
        <a href="javascript:;" id="prev" class="arrow">&lt;</a>
        <a href="javascript:;" id="next" class="arrow">&gt;</a>
    </div>
<script>
    // 第一步：先实现点击左右切换按钮实现切换图片的效果,（样式图片集合定位left：0,然后给一个总的宽度）
    // 第二步：重新循环
    // 第三步：然后对应原点和箭头
    window.onload = function() {
        var index = 1;
        var list_img = document.getElementById("list_img");
        var prev = document.getElementById("prev");
        var next = document.getElementById("next");
        var nav = document.getElementById("nav");

        prev.onclick = function() {
            var offset = parseInt(list_img.offsetLeft);

            if (offset == 0) {
                list_img.style.left = -2400 + 'px';
            } else {
                offset = offset + 1200;
                list_img.style.left = offset + 'px';
            }
            index = index - 1;
            if (index < 1) {
                index = 3;
            }
            btnShow(index);

        }
        next.onclick = function() {
            var offset = parseInt(list_img.offsetLeft) - 1200;
            list_img.style.left = offset + 'px';

            if (offset < -2400) {
                list_img.style.left = 0 + 'px';
            }
            index += 1;
            if (index > 3) {
                index = 1;
            }
            btnShow(index);

        }

        function btnShow(cur_index) {
            var list = nav.children;
            for (var i = 0; i < nav.children.length; i++) {
                nav.children[i].children[0].className = "";
            }
            nav.children[cur_index - 1].children[0].className = "current";
        }


    }
</script>
</style>
* {
    margin: 0px;
    padding: 0px;
    text-decoration: none;
}

#banner {
    position: relative;
    width: 1200px;
    height: 340px;
    margin: 0 auto;
    overflow: hidden;
}

.list_img {
    width: 3600px;
    height: 340px;
    position: absolute;
    left: 0px;
    overflow: hidden;
}

.list_img img {
    float: left;
}

.arrow {
    position: absolute;
    background-color: rgba(0, 0, 0, 0.3);
    font-size: 50px;
    color: #ffffff;
    top: 50%;
    cursor: pointer;
    transform: translateY(-50%);
}

.arrow:hover {
    background-color: RGBA(0, 0, 0, .7);
}

#prev {
    left: 20px;
}

#next {
    right: 20px;
}

.icon_img {
    position: absolute;
    left: 50%;
    bottom: 20px;
    transform: translateX(-50%);
}

.icon_img span a {
    cursor: pointer;
    float: left;
    margin-right: 15px;
    width: 10px;
    background: #333;
    height: 10px;
    color: #555;
    border-radius: 50%;
    border: 1px solid #fff;
}

.icon_img span a.current {
    background: orangered;
}

</style>