在主目录中的多个按钮\ div上切换多个图像

<div id="imageContainer">
  <img id="image1" src="image1.jpg" alt="Image 1">
  <img id="image2" src="image2.jpg" alt="Image 2">
  <img id="image3" src="image3.jpg" alt="Image 3">
</div>

<button id="button1">Button 1</button>
<button id="button2">Button 2</button>
<button id="button3">Button 3</button>

#imageContainer {
  width: 100%;
  height: 300px;
  position: relative;
}

img {
  width: 100%;
  height: 100%;
  position: absolute;
  top: 0;
  left: 0;
  display: none;
}

button {
  margin-right: 10px;
}

// 获取按钮和图像元素
var button1 = document.getElementById("button1");
var button2 = document.getElementById("button2");
var button3 = document.getElementById("button3");
var image1 = document.getElementById("image1");
var image2 = document.getElementById("image2");
var image3 = document.getElementById("image3");

// 监听按钮的点击事件
button1.addEventListener("click", function() {
  // 隐藏其他图像，显示图像1
  image2.style.display = "none";
  image3.style.display = "none";
  image1.style.display = "block";
});

button2.addEventListener("click", function() {
  // 隐藏其他图像，显示图像2
  image1.style.display = "none";
  image3.style.display = "none";
  image2.style.display = "block";
});

button3.addEventListener("click", function() {
  // 隐藏其他图像，显示图像3
  image1.style.display = "none";
  image2.style.display = "none";
  image3.style.display = "block";
});