交互式图片展示：点击缩略图显示大图及 alt 文本的实现教程-html教程-PHP中文网

交互式图片展示：点击缩略图显示大图及 alt 文本的实现教程

本教程详细介绍了如何通过 JavaScript 实现点击缩略图后，在一个指定区域显示完整大图，并在大图下方同步展示该图片 alt 文本的功能。文章涵盖了 HTML 结构搭建、JavaScript 核心逻辑实现，包括直接更新预设文本元素和动态创建并插入文本元素的两种方法，旨在提供一个专业且实用的交互式图片展示解决方案。

引言：实现点击缩略图显示大图及 alt 文本功能

在网页开发中，常见的需求是点击一个缩略图（thumbnail）后，能在页面上的某个区域显示该图片的完整版本，并且通常还需要展示一些描述性文字，例如图片的 alt 文本。alt 文本不仅对搜索引擎优化（SEO）和屏幕阅读器等辅助技术至关重要，也能在图片加载失败时提供替代信息。本教程将指导您如何使用 HTML、CSS（结合 Bootstrap）和 JavaScript 来实现这一交互功能。

HTML 结构准备

首先，我们需要构建基本的 HTML 结构，包括缩略图区域和用于显示大图及其 alt 文本的区域。我们将使用 Bootstrap 框架来辅助布局和样式。

核心 HTML 结构：

<!DOCTYPE html>
<html lang="zh-CN">
<head>
  <meta charset="UTF-8">
  <meta name="viewport" content="width=device-width, initial-scale=1.0">
  <title>图片展示与Alt文本</title>
  <!-- 引入 Bootstrap CSS -->
  <link rel="stylesheet" href="https://stackpath.bootstrapcdn.com/bootstrap/4.3.1/css/bootstrap.min.css" integrity="sha384-ggOyR0iXCbMQv3Xipma34MD+dH/1fQ784/j6cY/iJTQUOhcWr7x9JvoRxT2MZw1T" crossorigin="anonymous">
  <style>
    /* 示例 CSS 样式 */
    .thumbnailContainer {
      overflow-y: auto; /* 允许滚动，如果缩略图过多 */
      width: 180px;
      height: 40vh;
      border: 1px solid #ddd;
      padding: 10px;
      background-color: #f8f9fa;
    }
    .expandedImgSize {
      max-width: 800px; /* 控制大图显示区域的最大宽度 */
      margin-top: 20px;
      border: 1px solid #eee;
      padding: 15px;
      background-color: #fff;
      box-shadow: 0 4px 8px rgba(0,0,0,0.1);
    }
    #expandedImg {
      max-width: 100%;
      height: auto;
      display: block; /* 确保图片独占一行 */
      margin-bottom: 10px; /* 与下方alt文本的间距 */
    }
    #imgText {
      font-style: italic;
      color: #555;
      margin-top: 10px;
      padding-top: 10px;
      border-top: 1px dashed #ccc;
    }
  </style>
</head>
<body>

<div class="container mt-4">
  <div class="row">
    <!-- 缩略图区域 -->
    <div class="col-md-3">
      <h3>缩略图</h3>
      <div class="thumbnailContainer">
        <img src="https://ursd.org/wp-content/uploads/2020/12/1.png" alt="第一张图片的描述文本" class="img-thumbnail border-0 img-thumbnail-desktop" style="max-width:140px;" onclick="myFunction(this);">
        <img src="https://via.placeholder.com/150/FF0000/FFFFFF?text=Image+2" alt="第二张图片的描述文本" class="img-thumbnail border-0 img-thumbnail-desktop mt-2" style="max-width:140px;" onclick="myFunction(this);">
        <img src="https://via.placeholder.com/150/00FF00/FFFFFF?text=Image+3" alt="第三张图片的描述文本" class="img-thumbnail border-0 img-thumbnail-desktop mt-2" style="max-width:140px;" onclick="myFunction(this);">
      </div>
    </div>

    <!-- 大图显示区域 -->
    <div class="col-md-9">
      <h3>大图展示</h3>
      <div class="expandedImgSize d-flex flex-column justify-content-center align-items-center">
        <!-- 初始占位图，或者可以为空 -->
        <img class="img-fluid" id="expandedImg" src="https://via.placeholder.com/600x400?text=点击缩略图显示大图">
        <!-- 用于显示 alt 文本的区域 -->
        <div id="imgText">
          点击左侧缩略图查看详情。
        </div>
      </div>
    </div>
  </div>
</div>

<script src="https://code.jquery.com/jquery-3.3.1.slim.min.js" integrity="sha384-q8i/X+965DzO0rT7abK41JStQIAqVgRVzpbzo5smXKp4YfRvH+8abtTE1Pi6jizo" crossorigin="anonymous"></script>
<script src="https://cdnjs.cloudflare.com/ajax/libs/popper.js/1.14.7/umd/popper.min.js" integrity="sha384-UO2eT0CpHqdSJQ6hJty5KVphtPhzWj9WO1clHTMGa3JDZwrnQq4sF86dIHNDz0W1" crossorigin="anonymous"></script>
<script src="https://stackpath.bootstrapcdn.com/bootstrap/4.3.1/js/bootstrap.min.js" integrity="sha384-JjSmVgyd0p3pXB1rRibZUAYoIIy6OrQ6VrjIEaFf/nJGzIxFDsf4x0xIM+B07jRM" crossorigin="anonymous"></script>

<!-- JavaScript 代码将在此处添加 -->

</body>
</html>

登录后复制

在上述 HTML 中：

我们定义了一个 thumbnailContainer 来存放所有缩略图。
每个缩略图 <img> 标签都包含 alt 属性，这是我们希望显示的内容。
每个缩略图都绑定了 onclick="myFunction(this);" 事件，this 会将当前被点击的 <img> 元素作为参数传递给 myFunction。
expandedImgSize 是大图的显示容器。
id="expandedImg" 的 <img> 标签用于显示点击后的大图。
id="imgText" 的 <div> 标签是专门用来显示 alt 文本的区域。

JavaScript 核心逻辑：myFunction 函数实现

接下来，我们编写 myFunction 函数，它将处理点击事件，更新大图的 src 属性，并显示相应的 alt 文本。

方法一：更新预设的 id="imgText" 元素

芦笋演示

一键出成片的录屏演示软件，专为制作产品演示、教学课程和使用教程而设计。

查看详情

这是最直接的方法，适用于您已经在大图区域预留了一个专门的元素来显示文本。

<script>
function myFunction(imgs) {
  // 获取大图显示元素
  var expandImg = document.getElementById("expandedImg");
  // 获取显示 alt 文本的元素
  var imgText = document.getElementById("imgText");

  // 更新大图的 src 属性为被点击缩略图的 src
  expandImg.src = imgs.src;

  // 将被点击缩略图的 alt 属性值赋给 imgText 元素的 innerHTML
  imgText.innerHTML = imgs.alt;

  // 确保大图的父容器可见（如果它可能被隐藏）
  // 注意：在我们的示例中，父容器是始终可见的，此行可能不是必需的，但保留以备需要
  // expandImg.parentElement.style.display = "flex"; // 根据您的父容器 display 属性调整
}
</script>

登录后复制

代码解析：

document.getElementById("expandedImg")：获取用于显示大图的 <img> 元素。
document.getElementById("imgText")：获取用于显示 alt 文本的 <div> 元素。
expandImg.src = imgs.src;：将被点击缩略图（imgs）的 src 属性值赋给大图元素，从而改变大图。
imgText.innerHTML = imgs.alt;：将被点击缩略图（imgs）的 alt 属性值赋给 imgText 元素的 innerHTML，使其显示相应的文本。

进阶：动态创建并插入 alt 文本元素

有时，您可能不希望预设一个空的 div 来放置 alt 文本，或者希望更灵活地控制文本元素的创建和插入。这种情况下，可以动态创建 p 元素并将其插入到大图下方。这种方法更加灵活，但需要额外的逻辑来避免重复插入。

<script>
function myFunction(imgs) {
  var expandImg = document.getElementById("expandedImg");
  var expandedImgContainer = expandImg.parentElement; // 获取大图的父容器

  // 更新大图的 src 属性
  expandImg.src = imgs.src;

  // 1. 检查是否已存在动态插入的 alt 文本，如果存在则移除
  var existingAltText = expandedImgContainer.querySelector('.dynamic-alt-text');
  if (existingAltText) {
    existingAltText.remove();
  }

  // 2. 创建一个新的段落元素来显示 alt 文本
  var altNode = document.createElement("p");
  altNode.innerHTML = imgs.alt;
  altNode.className = "dynamic-alt-text"; // 添加一个类名以便后续查找和移除
  altNode.style.fontStyle = "italic";
  altNode.style.color = "#555";
  altNode.style.marginTop = "10px";
  altNode.style.paddingTop = "10px";
  altNode.style.borderTop = "1px dashed #ccc";

  // 3. 将新创建的 alt 文本元素插入到大图下方
  // expandedImgContainer.appendChild(altNode); // 插入到容器末尾
  // 或者更精确地插入到大图的下一个兄弟元素位置
  expandImg.parentNode.insertBefore(altNode, expandImg.nextSibling);

  // 确保大图的父容器可见
  // expandedImgContainer.style.display = "flex"; // 根据您的父容器 display 属性调整
}
</script>

登录后复制

代码解析：

expandedImgContainer = expandImg.parentElement;：获取大图的直接父容器，我们将在这个容器内操作。
expandedImgContainer.querySelector('.dynamic-alt-text')：查找容器内是否存在带有 dynamic-alt-text 类名的元素，如果存在，说明之前已经插入过 alt 文本。
existingAltText.remove();：如果找到旧的 alt 文本元素，将其移除，以避免每次点击都堆叠新的文本。
document.createElement("p")：创建一个新的 <p> 元素。
altNode.innerHTML = imgs.alt;：将 alt 文本赋值给新创建的 p 元素。
altNode.className = "dynamic-alt-text";：为动态创建的元素添加一个类名，方便后续查找和移除。
expandImg.parentNode.insertBefore(altNode, expandImg.nextSibling);：这是关键的插入操作。它将 altNode 插入到 expandImg 的父元素中，并且放在 expandImg 的下一个兄弟元素的位置。这样 alt 文本就会紧随在大图之后。

注意事项

alt 属性的重要性： 始终为您的 <img> 标签提供有意义的 alt 属性。这对于网页的可访问性（例如，屏幕阅读器用户）和搜索引擎优化至关重要。
CSS 样式： 根据您的设计需求，为 imgText 或动态创建的 alt 文本元素添加适当的 CSS 样式，使其与页面风格保持一致。
防止重复插入： 如果您使用动态创建并插入元素的方法，务必在每次更新前移除旧的 alt 文本元素，否则每次点击都会添加一个新的文本段落。
错误处理： 在实际项目中，您可能需要添加错误处理机制，例如检查 expandImg 或 imgText 是否存在，以防止因 DOM 元素未找到而导致的 JavaScript 错误。
性能优化： 对于包含大量缩略图的页面，考虑使用事件委托（Event Delegation）来处理点击事件，而不是为每个缩略图都绑定一个 onclick 属性。

总结

通过本教程，您学习了如何利用 HTML 结构和 JavaScript 逻辑，在用户点击缩略图时，在一个指定区域显示大图并同步展示其 alt 文本。无论是通过更新预设的 DOM 元素，还是通过动态创建和插入元素，这两种方法都能有效地实现这一常见的交互功能。选择哪种方法取决于您的具体需求和对代码灵活性的偏好。掌握这些技术将有助于您构建更具交互性和用户体验的网页。

以上就是交互式图片展示：点击缩略图显示大图及 alt 文本的实现教程的详细内容，更多请关注php中文网其它相关文章！