Javascript 带图像更改的Typed.js动画文本

我正在处理一个旋转木马，其中文本将保持静态，图像将根据typed.js列表中的关键字进行更改。我已将typed.js集成到静态html中。我现在要做的是根据typed.js列表中的单词更改图像，该列表当时正在设置动画。我的代码是：

我们设计

Typed.js脚本：

var typed=新类型（“#现有文本”{
字符串：[“新文本第一”，“新文本第二”]，
后退速度：80，
打字速度：80，
循环：对，
开始时间：100，
反向延迟：500，
});

您可以使用

javascript

在

内部更改

图像。
要实现如下更改代码：

Html
您可以在此处找到工作示例：

首先，我们需要一个存储图像和文本的地方。这可以使用两个阵列完成：

const图像=[
“图片src here”，
“这里是第二个src”
]
常量文本=[
“此处的第一个文本”，
“此处为第二个文本”
]

然后，我们可以使用Typed.js的
onStringTyped
选项来更新文本：

var typed=新类型（“#现有文本”{
字符串：文本，
后退速度：80，
打字速度：80，
循环：对，
开始时间：100，
反向延迟：500，
OnString类型：（pos）=>{
//确保图像标签的id为“图像”
document.getElementById（“image”）.src=images[pos]
}
});

或者，也可以将图像/文本存储在对象中：

const消息={
“此处第一个文本”：“此处图像src”，
“此处第二个文本”：“此处第二个src”
}

然后使用
消息构建
文本
和
图像
数组
：

const text=messages.keys（）
const messages=messages.values（）

 <div class="main hero-box">
   <div class="col-xl-7 col-lg-7 col-md-7 col-sm-7 col-xs-12">
     <span class="design">We Design</span>
     <span id="existing-text"></span>    
   </div>
   <div class="product-image col-xl-5 col-lg-5 col-md-5 col-sm-5 col-xs-12">
      <!-- Images will be added here via JS -->
   </div>
 </div>

// String array that you will pass in `Typed` 
const stringsArray = ["First", "Second", "Third"];

// Let's take the element where we need to render our images
const imgBox = document.querySelector(".product-image");

/** This function will tell which image we need to show 
 * inside `imgBox` according to which string name. 
 * (I used random images, you can pass "src" here in return)
**/
function getImageSrc(name) {
  switch (name) {
    case "First":
      return "https://homepages.cae.wisc.edu/~ece533/images/airplane.png";
    case "Second":
      return "https://homepages.cae.wisc.edu/~ece533/images/baboon.png";
    case "Third":
      return "https://homepages.cae.wisc.edu/~ece533/images/cat.png";
  }
}


/** 'onStringTyped' method will be used here to get 
* which string is typed. This function gets index of the array, 
* we use it to get the name of image.
**/ 
var typed = new Typed('#existing-text', {
  strings: stringsArray,
  backSpeed: 80,
  typeSpeed: 80,
  loop: true,
  startDelay: 100,
  backDelay: 500,
  onStringTyped: function(index) {
    const name = stringsArray[index];
    let img = document.createElement("img");
    img.width = "100";
    img.src = getImageSrc(name);
    imgBox.innerHTML = "";
    imgBox.appendChild(img);
  },
});