JS实现点击button按钮切换图片

JS实现点击button按钮切换图片的过程可以分为以下几个步骤：

在HTML文件中创建一个img元素，并给它一个id。
创建一个button按钮，并给它一个id。
使用JavaScript获取到img元素和button按钮。
在JavaScript中为button按钮添加一个点击事件的监听器。
在点击事件监听函数中，更改img元素的src属性以切换图片。

接下来，我们来看两个示例：

示例一：点击按钮切换两张图片

<!-- HTML文件 -->
<!DOCTYPE html>
<html>
  <head>
    <title>Button切换图片示例</title>
  </head>
  <body>
    <img id="myImage" src="image1.jpg" />
    <button id="switchButton">Switch Image</button>
    <script src="script.js"></script>
  </body>
</html>

// JavaScript文件
const myImage = document.getElementById("myImage");
const switchButton = document.getElementById("switchButton");

let currentImageIndex = 1;

switchButton.addEventListener("click", () => {
  if (currentImageIndex === 1) {
    myImage.src = "image2.jpg";
    currentImageIndex = 2;
  } else {
    myImage.src = "image1.jpg";
    currentImageIndex = 1;
  }
});

在这个示例中，我们首先在HTML文件中创建了一个img元素和一个button按钮，并给它们各自一个id。然后，在JavaScript文件中，我们使用document.getElementById()函数获取到了这两个元素，并将它们保存在myImage和switchButton变量中。

接着，我们为button按钮添加了一个点击事件的监听器。在点击事件监听函数中，我们使用一个currentImageIndex变量来跟踪当前图片的索引。当按钮被点击时，我们检查currentImageIndex的值，然后根据需要更改img元素的src属性。同时，我们也更改currentImageIndex的值，以确保下一次点击按钮时，能够正确地切换到另一张图片。

示例二：点击按钮按顺序切换多张图片

<!-- HTML文件 -->
<!DOCTYPE html>
<html>
  <head>
    <title>Button按顺序切换多张图片示例</title>
  </head>
  <body>
    <img id="myImage" src="image1.jpg" />
    <button id="switchButton">Switch Image</button>
    <script src="script.js"></script>
  </body>
</html>

// JavaScript文件
const myImage = document.getElementById("myImage");
const switchButton = document.getElementById("switchButton");

const imagePaths = ["image1.jpg", "image2.jpg", "image3.jpg", "image4.jpg"];
let currentImageIndex = 0;

switchButton.addEventListener("click", () => {
  currentImageIndex = (currentImageIndex + 1) % imagePaths.length;
  myImage.src = imagePaths[currentImageIndex];
});

在这个示例中，我们同样首先在HTML文件中创建了一个img元素和一个button按钮，并给它们各自一个id。然后，在JavaScript文件中，我们使用document.getElementById()函数获取到了这两个元素，并将它们保存在myImage和switchButton变量中。

接着，我们定义了一个imagePaths数组，其中存储了我们需要切换的所有图片的路径。我们还定义了一个currentImageIndex变量，用来记录当前显示的图片的索引。

最后，我们为button按钮添加了一个点击事件的监听器。在点击事件监听函数中，我们通过模运算将currentImageIndex的值限制在0到imagePaths.length - 1之间，以便实现图片的循环显示。然后，我们将img元素的src属性设置为当前图片对应的路径。这样，每当我们点击按钮时，图片就会按顺序切换到下一张。

本站文章如无特殊说明，均为本站原创，如若转载，请注明出处：JS实现点击button按钮切换图片 - Python技术站

JS实现点击button按钮切换图片

相关文章