正文

如何用JavaScript让按钮点击时切换图片显示效果？

/0 浏览量
0831

在网页设计中，图片切换是一个常见的交互效果，可以让页面更加生动有趣。使用JavaScript实现按钮点击切换图片，可以通过以下步骤来完成：

准备工作

首先，我们需要在HTML中添加图片和按钮元素。这里我们以两个图片为例：

<!DOCTYPE html>
<html lang="zh-CN">
<head>
<meta charset="UTF-8">
<title>图片切换效果</title>
<style>
  img {
    width: 300px;
    height: 200px;
    margin: 20px;
  }
</style>
</head>
<body>
  <img id="image1" src="image1.jpg" alt="图片1">
  <img id="image2" src="image2.jpg" alt="图片2" style="display:none;">
  <button id="button">切换图片</button>

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

在上面的代码中，我们定义了两个<img>标签和一个<button>按钮。其中，两个图片标签的src属性分别指向不同的图片，初始时第二个图片是隐藏的。

JavaScript代码

接下来，我们需要编写JavaScript代码来控制图片的切换。以下是一个简单的实现：

document.getElementById('button').addEventListener('click', function() {
  var img1 = document.getElementById('image1');
  var img2 = document.getElementById('image2');
  
  // 切换图片的显示状态
  if (img1.style.display === 'none') {
    img1.style.display = 'block';
    img2.style.display = 'none';
  } else {
    img1.style.display = 'none';
    img2.style.display = 'block';
  }
});

在这段代码中，我们首先通过getElementById方法获取到按钮和两个图片元素。然后，给按钮添加一个点击事件监听器，当按钮被点击时，执行一个函数。

在函数中，我们通过getElementById方法获取到两个图片元素，并获取它们的style.display属性值。如果第一个图片是隐藏的（style.display === 'none'），则将其显示，并隐藏第二个图片；反之，如果第一个图片是显示的，则将其隐藏，并显示第二个图片。

完整代码

将HTML和JavaScript代码合并，我们得到以下完整的示例：

<!DOCTYPE html>
<html lang="zh-CN">
<head>
<meta charset="UTF-8">
<title>图片切换效果</title>
<style>
  img {
    width: 300px;
    height: 200px;
    margin: 20px;
  }
</style>
</head>
<body>
  <img id="image1" src="image1.jpg" alt="图片1">
  <img id="image2" src="image2.jpg" alt="图片2" style="display:none;">
  <button id="button">切换图片</button>

  <script>
    document.getElementById('button').addEventListener('click', function() {
      var img1 = document.getElementById('image1');
      var img2 = document.getElementById('image2');
      
      // 切换图片的显示状态
      if (img1.style.display === 'none') {
        img1.style.display = 'block';
        img2.style.display = 'none';
      } else {
        img1.style.display = 'none';
        img2.style.display = 'block';
      }
    });
  </script>
</body>
</html>

现在，当你点击按钮时，两个图片将会进行切换显示。你可以根据需要修改图片路径和样式。

-- 展开阅读全文 --