正文

用JavaScript制作一个按钮切换两张图片的方法

/0 浏览量
0711

在网页设计中，图片切换是一个常见的交互效果，可以增加页面的动态感和用户体验。下面，我将详细讲解如何使用JavaScript来实现一个按钮切换两张图片的功能。

基本思路

  1. 准备两张图片，并分别赋予不同的ID。
  2. 创建一个按钮，并为该按钮添加点击事件监听器。
  3. 在事件监听器中，通过JavaScript获取当前显示的图片，并切换到另一张图片。

代码实现

以下是一个简单的示例，展示了如何使用JavaScript实现按钮切换两张图片的功能。

<!DOCTYPE html>
<html lang="zh-CN">
<head>
<meta charset="UTF-8">
<title>图片切换示例</title>
<style>
  #image1, #image2 {
    width: 300px;
    height: 200px;
    margin-bottom: 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="switchBtn">切换图片</button>

  <script>
    // 获取图片和按钮元素
    var image1 = document.getElementById('image1');
    var image2 = document.getElementById('image2');
    var switchBtn = document.getElementById('switchBtn');

    // 添加点击事件监听器
    switchBtn.addEventListener('click', function() {
      // 切换图片显示
      if (image1.style.display === 'block') {
        image1.style.display = 'none';
        image2.style.display = 'block';
      } else {
        image1.style.display = 'block';
        image2.style.display = 'none';
      }
    });
  </script>
</body>
</html>

代码解析

  1. 在HTML部分，我们定义了两个<img>标签，分别对应两张图片，并赋予它们不同的ID。同时，我们创建了一个按钮，并为它设置了ID。
  2. 在CSS部分，我们设置了图片的宽度和高度，以及初始的显示状态。
  3. 在JavaScript部分，我们首先获取了图片和按钮元素。然后，为按钮添加了一个点击事件监听器。
  4. 在事件监听器中，我们通过判断当前显示的图片，来切换到另一张图片。如果image1是显示的，则隐藏image1并显示image2；反之，则显示image1并隐藏image2。

总结

通过以上步骤，我们可以使用JavaScript实现一个简单的按钮切换两张图片的功能。在实际应用中，可以根据需求对代码进行修改和扩展，例如添加动画效果、限制切换次数等。

-- 展开阅读全文 --