JavaScript点击按钮切换图片实例

原创

于 2024-05-16 10:12:55 发布 · 1.8k 阅读

11 ·

CC 4.0 BY-SA版权

文章标签：

#javascript #开发语言 #ecmascript

以下是一个示例代码，用于在JavaScript中点击按钮切换图片：

HTML代码：

<!DOCTYPE html>
<html>
<body>

<button onclick="changeImage()">切换图片</button>

<img id="myImage" src="image1.jpg" style="width:200px">

<script src="script.js"></script>

</body>
</html>

JavaScript代码（script.js）：

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

在这个示例中，我们使用getElementById方法获取到myImage元素，然后通过image.src来改变图片的源文件。当点击按钮时，changeImage函数被调用，并检查当前图片的源文件是image1.jpg还是image2.jpg，然后进行相应的切换。

有多种方法可以使用 JavaScript 点击按钮切换图片。以下是其中两种常见的实现方法：

方法一：使用一个数组保存多张图片的源文件，通过改变图片元素的 src 属性来切换图片。