如何在特定对话文本展示完成后显示第二张图片？

实现特定文本展示后切换图片的方法 #

步骤1：修正HTML结构并添加第二张图片

原HTML中图片标签的id属性写法错误，需将其放入<img>标签内，同时添加第二张图片并默认隐藏：

<!DOCTYPE html>
<html lang="en">
<head>
<link rel="stylesheet" href="styles.css">
</head>
<body> 
<center>
  <img id="storyImg" src="Caniglia-Image-07_Karl-Liebknecht_Kollwitz-1-1024x663.jpg" alt="初始图片">
  <img id="secondImg" src="你的第二张图片URL" alt="第二张图片" style="display: none;">
</center>

<input type="button" value="Fullscreen" onclick="toggleFullScreen(document.body)">

<div class = "form">
    <button onclick="help();">click</button>
    <p id="doThis" data-index="-1"></p>
</div>

<script src = "lines.js"></script>
</body>
</html>

步骤2：修改JavaScript逻辑，添加图片切换判断

在文本逐行写入的逻辑中，增加判断：当指定段落（比如第二段）完全展示后，切换显示第二张图片，同时重置状态避免重复触发：

var objects = [
    "The rain goes clickety clack tack. It was a cold night and a ruthful glimmer of azure pervaded the skies, which were dormantly laid above the cosmopolitan city. The children quietly wept under tattered rags and the grown ups began celebrating on the filth-stained juice joints, while the Plenilune was shining brightly upon them, giving an everlasting impression of cruel romanticism.",
    "Me and Mary went on a ride with the new red car through the woods. We had an argument about Helena. And then an accident happened. The car crashed. I-I hope she's dead.",
    "I wandered the woods and the memories slowly faded away. The insects were buzzing and the birds were chirping. As I was walking towards the forest's insides, I came across a group of people mourning over a mutilated body."
];

function toggleFullScreen(elem) {
    if ((document.fullScreenElement !== undefined && document.fullScreenElement === null) || (document.msFullscreenElement !== undefined && document.msFullscreenElement === null) || (document.mozFullScreen !== undefined && !document.mozFullScreen) || (document.webkitIsFullScreen !== undefined && !document.webkitIsFullScreen)) {
        if (elem.requestFullScreen) {
            elem.requestFullScreen();
        } else if (elem.mozRequestFullScreen) {
            elem.mozRequestFullScreen();
        } else if (elem.webkitRequestFullScreen) {
            elem.webkitRequestFullScreen(Element.ALLOW_KEYBOARD_INPUT);
        } else if (elem.msRequestFullscreen) {
            elem.msRequestFullscreen();
        }
    } else {
        if (document.cancelFullScreen) {
            document.cancelFullScreen();
        } else if (document.mozCancelFullScreen) {
            document.mozCancelFullScreen();
        } else if (document.webkitCancelFullScreen) {
            document.webkitCancelFullScreen();
        } else if (document.msExitFullscreen) {
            document.msExitFullscreen();
        }
    }
}

const paragraph = document.getElementById("doThis");
const writeSpeed = 30;
let letterIndex = 0;
let objectsIndex = 0;
// 获取图片元素
const storyImg = document.getElementById("storyImg");
const secondImg = document.getElementById("secondImg");
// 标记图片是否已切换，防止重复触发
let hasSwitchedImage = false;

function write() {
  const sentence = objects[objectsIndex];
  if (letterIndex > sentence.length) {
    letterIndex = 0;
    // 写完第二段后切换图片（数组索引从0开始，第二段对应index=1）
    if (objectsIndex === 1 && !hasSwitchedImage) {
      storyImg.style.display = "none";
      secondImg.style.display = "block";
      hasSwitchedImage = true;
    }
    objectsIndex++;
    // 还有未展示的段落则继续执行
    if (objectsIndex < objects.length) {
      setTimeout(write, writeSpeed);
    }
    return;
  }
  paragraph.innerHTML += sentence.charAt(letterIndex);
  letterIndex++;
  setTimeout(write, writeSpeed);
}

function help() {
  paragraph.innerHTML = "";
  letterIndex = 0;
  objectsIndex = 0;
  hasSwitchedImage = false;
  // 重置图片显示状态
  storyImg.style.display = "block";
  secondImg.style.display = "none";
  write();
};

步骤3：可选优化CSS（统一图片样式）

给图片添加统一样式，避免切换时出现布局混乱：

html {
  background-color: black;
}

button {
  position:center;
  background-color:lightblue;
  width: 3.5%;
}

#doThis {
    text-indent: 50px;
    color:white;
    font:Bahnschrift SemiLIght;
    font-size: 16px; /* 修正原无效的font-size值 */
    text-align: center;
    letter-spacing: 2px;
}
  
 #doThis::after {
  content: "";
  width: 5px;
  height: 20px;
  background: white;
  display: inline-block;
}

#doThis::after {
  animation: blink 1.5s steps(2) infinite;
}

@keyframes blink {
  0% {
    opacity: 0;
  }
}

/* 统一图片样式 */
#storyImg, #secondImg {
  max-width: 100%;
  height: auto;
}

关键说明 #

• 修复了原HTML中图片标签的语法错误，确保id属性生效。
• 通过display:none/block控制图片的显示与隐藏，实现切换效果。
• 增加hasSwitchedImage标记，避免重复触发图片切换逻辑。
• 在点击按钮重置故事时，同步重置图片状态，确保每次都能从头开始展示。

内容的提问来源于stack exchange，提问作者Jim Giann