js点击按钮切换图片4张

你可以使用以下代码实现：

HTML部分：

<button onclick="changeImage()">切换图片</button>
<img id="myImage" src="image1.jpg" alt="图片1">

JavaScript部分：

var images = ["image1.jpg", "image2.jpg", "image3.jpg", "image4.jpg"];
var currentIndex = 0;

function changeImage() {
  var img = document.getElementById("myImage");
  currentIndex = (currentIndex + 1) % images.length;
  img.src = images[currentIndex];
}

在这个例子中，我们首先定义了一个包含四张图片文件名的数组，以及一个变量来保存当前显示的图片编号。当用户点击按钮时，我们会更新当前编号并将对应的图片文件名赋值给`<img>`元素的`src`属性，以此来切换图片。这里使用了取模运算符来确保图片编号的循环切换。

相关问题

js点击按钮切换图片

要通过JavaScript点击按钮切换图片，可以按照以下步骤进行操作：

1. 首先，获取按钮对象和img标签的属性。可以使用`getElementById`方法获取按钮对象，使用`getElementsByTagName`方法获取img标签对象。

2. 接着，通过JavaScript获取到img标签中的src属性，并对其进行修改。可以使用`getAttribute`方法获取src属性的值，使用`setAttribute`方法修改src属性的值。

3. 然后，为两个按钮添加单击响应函数。可以使用`addEventListener`方法为按钮对象添加单击事件监听器。

4. 最后，在响应函数中修改img标签中的src属性，实现图片切换。可以使用条件判断语句和递增/递减操作来修改index变量的值，并将对应索引的图片路径赋给img标签的src属性。

示例代码如下：

// 获取按钮对象
var last = document.getElementById("last");
var next = document.getElementById("next");

// 获取img标签对象
var img = document.getElementsByTagName("img")[0];

// 创建一个数组来保存图片的路径
var imgArr = ["../img/js_image/复联一.webp","../img/js_image/复联二.webp","../img/js_image/复联三.webp","../img/js_image/复联四.webp","../img/js_image/复联五.webp","../img/js_image/复联六.webp",];

// 创建一个变量存储当前正在显示的图片的索引
var index = 0;

// 设置按钮的单击事件监听器
last.addEventListener("click", function() {
  if (index > 0) {
    index--;
  }
  img.setAttribute("src", imgArr[index]);
});

next.addEventListener("click", function() {
  if (index < imgArr.length - 1) {
    index++;
  }
  img.setAttribute("src", imgArr[index]);
});

使用以上代码，点击"上一张"按钮可以切换到前一张图片，点击"下一张"按钮可以切换到后一张图片。

js怎么实现点击按钮图片切换

可以使用JavaScript来实现点击按钮图片切换的效果。具体实现方法如下：

1. 在 HTML 中创建一个包含图片的标签，如 `<img>` 或 `<div>`。

2. 给图片标签设置一个 id 或 class，以便在 JavaScript 中找到它。

3. 在 JavaScript 中获取图片标签，并创建一个按钮元素。

4. 给按钮添加一个点击事件，当点击按钮时，切换图片的 src 属性，使其显示不同的图片。

以下是一个简单的示例代码：

HTML:

<div>
  <img id="myImage" src="image1.jpg" alt="Image">
</div>
<button onclick="changeImage()">切换图片</button>

JavaScript:

function changeImage() {
  var image = document.getElementById('myImage');
  if (image.src.match("image1")) {
    image.src = "image2.jpg";
  } else {
    image.src = "image1.jpg";
  }
}

这个示例中，初始显示的是 `image1.jpg` 图片，点击按钮后，图片会切换到 `image2.jpg`，再次点击按钮时，图片会再次切换回 `image1.jpg`。