点击左右按钮实现轮播图切换图片

style：

*{
        margin: 0;
        padding: 0;
        margin: auto;
    }
    #img1{
        width: 300px;
        height: 300px;
        position: relative;
    }
    #butto1{
        width: 50px;
        height: 100px;
        font-size: 50px;
        border: none;
        background-color: hsla(0, 0%, 0%, 0.2);
        position: absolute;
        top: 100px;
        left: 0px;
        color: aquamarine;
    }
    #butto2{
        width: 50px;
        height: 100px;
        font-size: 50px;
        border: none;
        background-color: hsla(0, 0%, 0%, 0.2);
        position: absolute;
        top: 100px;
        left: 250px;
        color: aquamarine;
    }

html：

<div>
        <img id="img1" src="https://d-ssl.dtstatic.com/uploads/blog/202402/01/V2SoD3v1HmgwjZ6.thumb.1000_0.jpg_webp" alt="">
        <button id="butto1"><</button>

        <button id="butto2">></button>
    </div>

style：

var imgss = document.getElementById("img1");
        var button1 = document.getElementById("butto1");
        var button2 = document.getElementById("butto2");
        var index = 0;
        var images = [
            "https://d-ssl.dtstatic.com/uploads/blog/202402/01/V2SoD3v1HmgwjZ6.thumb.1000_0.jpg_webp",
            "https://d-ssl.dtstatic.com/uploads/blog/202402/01/JOS3dXY9TWDA04e.thumb.1000_0.jpg_webp",
            "https://d-ssl.dtstatic.com/uploads/blog/202402/01/0GSP0XdvS0qgy3D.thumb.1000_0.jpg_webp",
            "https://d-ssl.dtstatic.com/uploads/blog/202402/01/N5SoxNdwHPypJ1p.thumb.1000_0.jpg_webp"
        ];

        button1.addEventListener("click", function () {
            index--;
            if (index < 0) {
                index = images.length - 1;
            }
            imgss.src = images[index];
        });

        button2.addEventListener("click", function () {
            index++;
            if (index >= images.length) {
                index = 0;
            }
            imgss.src = images[index];
        });