点击图片切换对应描述文本：7张角色图片的交互实现需求

要实现点击角色图片切换下方对应文本的效果，你可以按以下方式修改代码：

1. 调整HTML结构并添加交互逻辑 #

给每个图片绑定对应文本，同时加入JavaScript处理点击事件：

<!DOCTYPE html>
<html lang="zh-CN">
<head>
  <link rel="stylesheet" href="style.css">
  <title>角色展示</title>
</head>
<body>
  <!-- 用容器包裹图片，方便排版 -->
  <div class="characters-container">
    <img class="character-img" src="//picsum.photos/80" alt="角色1" data-text="这是角色1的专属介绍内容">
    <img class="character-img" src="//picsum.photos/81" alt="角色2" data-text="角色2的背景故事在这里">
    <img class="character-img" src="//picsum.photos/82" alt="角色3" data-text="角色3的特长和性格介绍">
    <img class="character-img" src="//picsum.photos/83" alt="角色4" data-text="角色4的剧情线梳理">
    <img class="character-img" src="//picsum.photos/84" alt="角色5" data-text="角色5的人物设定解析">
    <img class="character-img" src="//picsum.photos/85" alt="角色6" data-text="角色6的关键剧情节点">
    <img class="character-img" src="//picsum.photos/86" alt="角色7" data-text="角色7的结局走向说明">
  </div>
  
  <!-- 用于展示角色介绍的文本区域 -->
  <p id="character-desc">请点击上方角色图片查看详情</p>

  <script>
    // 获取所有角色图片和文本元素
    const characterImgs = document.querySelectorAll('.character-img');
    const descElement = document.getElementById('character-desc');

    // 给每张图片绑定点击事件
    characterImgs.forEach(img => {
      img.addEventListener('click', () => {
        // 切换文本为当前图片对应的内容
        descElement.textContent = img.dataset.text;
      });
    });
  </script>
</body>
</html>

2. 添加CSS实现图片横向排列 #

在style.css中加入以下样式，确保图片横向有序排列，并提升交互体验：

.characters-container {
  display: flex;
  gap: 12px; /* 图片之间的间距，可根据需求调整 */
  margin-bottom: 25px;
}

.character-img {
  width: 80px;
  height: 80px;
  object-fit: cover; /* 保持图片比例，避免拉伸变形 */
  cursor: pointer; /* 鼠标悬停显示手型，提示可点击 */
  border-radius: 4px; /* 可选：给图片加圆角 */
  border: 2px solid #fff;
  transition: border-color 0.2s;
}

.character-img:hover {
  border-color: #2196F3; /* 悬停时显示蓝色边框，增强反馈 */
}

#character-desc {
  font-size: 16px;
  line-height: 1.5;
  color: #333;
}

关键说明： #

• 用data-text属性存储每个角色的对应文本，直接绑定在图片上，逻辑清晰易维护
• 通过flex布局快速实现图片横向排列，无需复杂的浮动设置
• 加入鼠标悬停效果，让用户明确知道图片可点击
• JavaScript部分通过遍历图片绑定点击事件，点击时直接读取data-text更新文本内容

内容的提问来源于stack exchange，提问作者Cursos 3