前端小菜鸟教您实现网页点击切换图片功能

2023-09-04 14:00:37

掌握 JavaScript 图片切换：打造互动且引人入胜的网页

作为一名前端开发的新手，我怀着对网页开发的热情，踏上了学习之旅。在深入 JavaScript 基础知识的海洋时，我偶然发现了一个迷人的代码片段，它可以轻松实现图片的切换，让我不禁惊叹于其巧妙。迫不及待地找来两张图片，我迫不及待地尝试了代码，发现它确实做到了：两张图片在屏幕上交替出现，真是太神奇了！

初识 HTML 结构

首先，我们需要在 HTML 中创建一个简单的结构，其中包含一个容器 div 和两个图像 div。容器 div 用来容纳两个图像 div，而图像 div 则用于显示图片。

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

精雕细琢的 CSS 样式

下一步，我们用 CSS 样式为容器 div 和图像 div 赋予生命，控制它们的布局和外观。

#container {
  width: 500px;
  height: 300px;
  margin: 0 auto;
  border: 1px solid black;
}

#image1, #image2 {
  width: 250px;
  height: 150px;
  float: left;
}

#image1 {
  margin-right: 10px;
}

解锁 JavaScript 代码的魔力

现在，我们准备编写 JavaScript 代码，让图片切换成为现实。我们使用 addEventListener() 方法监听容器 div 的点击事件，然后用 classList.toggle() 方法切换图像 div 的 display 属性，从而实现图片的交替显示。

const container = document.getElementById("container");

container.addEventListener("click", () => {
  const image1 = document.getElementById("image1");
  const image2 = document.getElementById("image2");

  image1.classList.toggle("hidden");
  image2.classList.toggle("hidden");
});