使用 JavaScript 实现 3x3 图片显示切换功能

本文将介绍如何使用 JavaScript 实现一个简单的图片显示切换功能，通过点击按钮，在 3x3 的图片阵列中，从指定位置开始显示图片。我们将提供详细的代码示例，并解释其背后的实现逻辑，帮助你理解如何利用 JavaScript 和 HTML 实现动态的页面效果。

HTML 结构

首先，我们需要创建 HTML 结构来显示图片和按钮。以下是一个基本的 HTML 示例：

<div class="image-wrapper">
  <div class="image">1</div>
  <div class="image">2</div>
  <div class="image">3</div>
  <div class="image">4</div>
  <div class="image">5</div>
  <div class="image">6</div>
  <div class="image">7</div>
  <div class="image">8</div>
  <div class="image">9</div>
</div>

<button data-index="1" onclick="onClick(event)">1</button>
<button data-index="2" onclick="onClick(event)">2</button>
<button data-index="3" onclick="onClick(event)">3</button>

在这个结构中，.image-wrapper 包含 9 个 .image 元素，代表 3x3 的图片阵列。每个按钮都有一个 data-index 属性，用于存储按钮的位置信息，并通过 onclick 事件调用 onClick 函数。

CSS 样式

为了使图片显示更美观，我们可以添加一些 CSS 样式：

立即学习“Java免费学习笔记（深入）”；

.image-wrapper {
  display: flex;
  flex-wrap: wrap; /* 确保图片可以换行 */
  width: 90px; /* 控制每行显示的图片数量 */
  gap: 10px;
  padding-block: 10px;
}

.image {
  border: 1px solid black;
  text-align: center;
  width: 20px;
  height: 20px;
}

这段 CSS 代码将 .image-wrapper 设置为 flex 容器，并使用 flex-wrap: wrap 确保图片可以换行显示。width属性用于控制每行显示的图片数量。.image 元素设置了边框、文本居中，并定义了宽度和高度。

JavaScript 代码

接下来，我们需要编写 JavaScript 代码来实现点击按钮切换图片显示的功能。

const images = document.querySelectorAll(".image");

const onClick = (ev) => {
  // 重置所有图片的背景色
  [...images].forEach(img => img.style.background = "none");

  const value = ev.target.dataset.index;
  const index = (+value) * 3 - 3;

  images[index].style.background = "#acc2fa";
}

这段代码首先通过 document.querySelectorAll(".image") 获取所有 .image 元素。onClick 函数是按钮点击事件的处理函数。

在 onClick 函数中，首先使用 [...images].forEach(img => img.style.background = "none") 重置所有图片的背景色，确保每次点击按钮时，只有一个图片被高亮显示。

AI图像编辑器

使用文本提示编辑、变换和增强照片

46

查看详情

然后，通过 ev.target.dataset.index 获取按钮的 data-index 属性值，并使用 (+value) * 3 - 3 计算出要高亮显示的图片的索引。这里的 (+value) 使用一元加运算符将字符串转换为数字。

最后，使用 images[index].style.background = "#acc2fa" 将指定索引的图片的背景色设置为 #acc2fa，实现高亮显示的效果。

另一种实现方式

你也可以直接将按钮的值传递给 onClick 函数，而不需要使用 data-index 属性：

<button onclick="onClick(1)">1</button>
<button onclick="onClick(2)">2</button>
<button onclick="onClick(3)">3</button>

相应的 JavaScript 代码需要进行修改：

const images = document.querySelectorAll(".image");

const onClick = (value) => {
  // 重置所有图片的背景色
  [...images].forEach(img => img.style.background = "none");

  const index = value * 3 - 3;

  images[index].style.background = "#acc2fa";
}

在这种实现方式中，onClick 函数直接接收按钮的值作为参数，代码更加简洁。

代码解释

const index = (+value) * 3 - 3; 这行代码是实现图片切换的核心。它根据按钮的值计算出要高亮显示的图片的索引。

• 当 value = 1 时，index = 1 * 3 - 3 = 0，表示高亮显示第一张图片。
• 当 value = 2 时，index = 2 * 3 - 3 = 3，表示高亮显示第四张图片。
• 当 value = 3 时，index = 3 * 3 - 3 = 6，表示高亮显示第七张图片。

这种计算方式可以确保点击不同的按钮，可以从不同的位置开始显示图片。

总结

通过本文的介绍，你学习了如何使用 JavaScript 实现一个简单的图片显示切换功能。你可以根据自己的需求，修改 HTML 结构、CSS 样式和 JavaScript 代码，实现更复杂的功能。例如，你可以添加更多的按钮，或者使用不同的图片来代替数字。希望本文对你有所帮助！

以上就是使用 JavaScript 实现 3x3 图片显示切换功能的详细内容，更多请关注php中文网其它相关文章！