点击按钮切换图片

点击按钮让一个div中的图片进行切换，切换效果有两种：
第一种是随机切换，效果如下：

点击按钮随机切换图片
html结构代码如下：

<style>
.imgBox,.imgBox img{
    width: 400px;
    height: 300px;
}
.imgBox{
    border:3px solid #ccc;
}
</style>
<button class="changeBtn">开始切换</button>
<div class="imgBox">
    <img src="./images/1.jpg" alt="">
</div>

js逻辑代码如下：

// 获取按钮和图片节点
var changeBtn = document.querySelector('.changeBtn')
var oImg = document.querySelector('.imgBox>img')
// 将所有图片路径组成数
var arr = ['./images/1.jpg','./images/2.jpg','./images/3.jpg'];
// 给按钮绑定单击事件
changeBtn.onclick = function(){
    // 获取数组的随机下标
    var index = Math.floor(Math.random()*arr.length);
    // 根据随机下标获取到数组中图片的路径
    var imgPath = arr[index]
    // 将图片路径放在图片的src属性中
    oImg.src = imgPath
}

第二种是按顺序切换图片，效果如下：

点击按钮按顺序切换图片

html结构代码如下：

<style>
.imgBox,.imgBox img{
    width: 400px;
    height: 300px;
}
.imgBox{
    border:3px solid #ccc;
}
</style>
<button class="changeBtn">开始切换</button>
<div class="imgBox">
    <img src="./images/1.jpg" alt="">
</div>

js效果代码如下：

// 获取按钮和图片节点
var changeBtn = document.querySelector('.changeBtn')
var oImg = document.querySelector('.imgBox>img')
// 将所有图片路径组成数
var arr = ['./images/1.jpg','./images/2.jpg','./images/3.jpg'];
// 定义当前显示的图片的路径在数组中的下标
var index = 0
// 给按钮绑定单击事件
changeBtn.onclick = function(){
    // 让数组下标自增
    index++
    // 显示下标最大值
    if(index === arr.length) index = 0
    // 根据随机下标获取到数组中图片的路径
    var imgPath = arr[index]
    // 将图片路径放在图片的src属性中
    oImg.src = imgPath
}