图片切换效果在生活中非常的常见，恰巧今天的练习也是做一个图片的切换效果。

HTML代码如下：

<div class="img">
    <img src="images/1.jpg" id="myImg" class="myImg"  alt="这里是1.jpg">
    <p>
        <input type="button" id="pre" class="btn" value="上一张">
        <input type="button" id="next" class="btn" value="下一张">
    </p>	
</div>

CSS代码如下：

*{
    margin: 0;
    padding: 0;
}
img{
    boder:none;
}
button{
    outline: none;
    vertical-align: middle;
}
.img{
    width: 100%;
    margin-left: auto;
    margin-right: auto;
    margin-top: 20px;
    text-align: center;
}
.myImg{
    width: 500px;
    height: 300px;
}
p{
    text-align: center;
}
p .btn{
    width: 100px;
    height: 30px;
    background: #306bbf;
    color: #fff;
    margin-top: 20px;
    margin-bottom: 20px;
}

javascript 部分：

//找标签
let  myImg = document.getElementById("myImg");
let pre=document.getElementById("pre");
let next=document.getElementById("next");

//创建一个保存图片的数组
let   arrImg = ["images/1.jpg", "images/1-1.png", "images/3.jpg" ];
//数组的索引下标
let index=0;
//定义事件函数
function preImg(event){
        index--;
        //实现循环切换
        if (index<0)
        {
            index=arrImg.length-1;
        }
    myImg.src = arrImg[index];
}
function nextImg(event){
    index++;
    //实现循环切换
    if (index>arrImg.length-1)
    {
        index=0;
    }
    myImg.src = arrImg[index];
}

pre.addEventListener('click',preImg);
next.addEventListener('click',nextImg);