js 点击按钮,js点击按钮切换图片4张：代码示例

点击按钮切换图片是一种常见的网页交互效果。我们可以使用JavaScript来实现这个功能。我们需要在HTML中定义一个按钮元素和一个图片元素，然后使用JavaScript来监听按钮的点击事件，并在点击事件发生时切换图片的src属性。

示例代码如下：

HTML部分：

<button id="btn">点击切换图片</button>
<img id="img" src="image1.jpg" alt="图片">

JavaScript部分：

// 获取按钮和图片元素
var btn = document.getElementById("btn");
var img = document.getElementById("img");
// 定义图片数组和索引
var images = ["image1.jpg", "image2.jpg", "image3.jpg", "image4.jpg"];
var index = 0;
// 监听按钮的点击事件
btn.addEventListener("click", function() {
  // 切换图片的src属性
  img.src = images[index];
  // 更新索引
  index++;
  // 如果索引超过了数组的长度，重置为0
  if (index >= images.length) {
    index = 0;
  }
});

在上面的示例代码中，我们首先通过document.getElementById方法获取了按钮和图片的元素。然后，我们定义了一个图片数组和一个索引变量，用于存储图片的路径和记录当前显示的图片索引。接着，我们使用addEventListener方法监听按钮的点击事件，并在点击事件发生时执行回调函数。在回调函数中，我们首先将图片的src属性设置为当前索引对应的图片路径，然后更新索引。我们通过判断索引是否超过数组长度来实现循环切换图片的效果。

通过以上的代码，当用户点击按钮时，图片将会按照定义的顺序依次切换。