JS event notes: picture switching

Start learning events and record some of the content in the class.

Create an images file under the site file to place the picture;
in the html file:

<div class="box">
    <img id="myPic" src="images/pic1.jpg" alt=""/>
    <div class="but">
        <div class="left" id="back">
            <a href="#">
                上一张
            </a>
        </div>
        <div class="right" id="next">
            <a href="#">
                下一张
            </a>
        </div>
    </div>
</div>

CSS style:

.box{
    width: 600px;
    height: 450px;
    display: flex;
    flex-direction: column;
    align-items: center;
    justify-content: space-around;
}
.but{
    display: flex;
    flex-direction: row;
}
.left,.right{
    width: 100px;
    height: 25px;
    background-color: #0086b3;
    line-height: 25px;
    border: 1px solid #ffffff;
}
a{
    text-decoration: none;
    display: block;
    padding: 0 20px 0 20px;
    color: white;
    font-size: 14px;
    text-align: center;
}
.left:hover,
.right:hover{
    background-color: #134788;
    border: 1px solid #f00;
}

JavaScript file:

{
    //对图片建立数组
    let pics = [
        "images/pic1.jpg",
        "images/pic2.jpg",
        "images/pic3.jpg",
        "images/pic4.jpg",
        "images/pic5.jpg"
    ];
    //建立变量对数组索引进行处理
    let index = 0 ;
    let backind = pics.length-1 ;
    // 找到相应的标签
    let myPic = document.getElementById("myPic");
    let next = document.getElementById("next");
    let back = document.getElementById("back");
    // 2. 建立事件处理函数
    let  nextPic = function( event ){
        index++ ;
        if( index > pics.length-1 ){
            index = 0;
        }
        myPic.src = pics[index] ;
        console.log(index);
    };
    let backPic = function( event ){
        backind-- ;
        if( backind < 0 ){
            backind = pics.length-1 ;
        }
        myPic.src = pics[ backind ] ;
        console.log(backind);
    };
    // 建立事件监听
    next.addEventListener("click", nextPic );
    back.addEventListener("click", backPic );
}

Hope each gains! ! ! !