本文将介绍如何使用 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") 重置所有图片的背景色，确保每次点击按钮时，只有一个图片被高亮显示。
然后，通过 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 代码，实现更复杂的功能。例如，你可以添加更多的按钮，或者使用不同的图片来代替数字。希望本文对你有所帮助！
