Javascript 使用jQuery更改具有类型写入文本效果的图像

我想在打印完每一行后更改图像。该示例仅显示2条线和2个图像，但会有许多线和图像

一旦行内容更改，图像必须更改

我该怎么办

JSDiffle:

HTML

jQuery

// values to keep track of the number of letters typed, which quote to use. etc. Don't change these values.
var i = 0,
    a = 0,
    isBackspacing = false,
    isParagraph = false;

// Typerwrite text content. Use a pipe to indicate the start of the second line "|".  
var textArray = [
  "This line would show video-1.jpg", 
  "And this would show video-2.jpg"
];

// Speed (in milliseconds) of typing.
var speedForward = 100, //Typing Speed
    speedWait = 1000, // Wait between typing and backspacing
    speedBetweenLines = 1000, //Wait between first and second lines
    speedBackspace = 25; //Backspace Speed

//Run the loop
typeWriter("output", textArray);

function typeWriter(id, ar) {
  var element = $("#" + id),
      aString = ar[a],
      eHeader = element.children("h1"), //Header element
      eParagraph = element.children("p"); //Subheader element

  // Determine if animation should be typing or backspacing
  if (!isBackspacing) {

    // If full string hasn't yet been typed out, continue typing
    if (i < aString.length) {

      // If character about to be typed is a pipe, switch to second line and continue.
      if (aString.charAt(i) == "|") {
        isParagraph = true;
        eHeader.removeClass("cursor");
        eParagraph.addClass("cursor");
        i++;
        setTimeout(function(){ typeWriter(id, ar); }, speedBetweenLines);

      // If character isn't a pipe, continue typing.
      } else {
        // Type header or subheader depending on whether pipe has been detected
        if (!isParagraph) {
          eHeader.text(eHeader.text() + aString.charAt(i));
        } else {
          eParagraph.text(eParagraph.text() + aString.charAt(i));
        }
        i++;
        setTimeout(function(){ typeWriter(id, ar); }, speedForward);
      }

    // If full string has been typed, switch to backspace mode.
    } else if (i == aString.length) {

      isBackspacing = true;
      setTimeout(function(){ typeWriter(id, ar); }, speedWait);

    }

  // If backspacing is enabled
  } else {

    // If either the header or the paragraph still has text, continue backspacing
    if (eHeader.text().length > 0 || eParagraph.text().length > 0) {

      // If paragraph still has text, continue erasing, otherwise switch to the header.
      if (eParagraph.text().length > 0) {
        eParagraph.text(eParagraph.text().substring(0, eParagraph.text().length - 1));
      } else if (eHeader.text().length > 0) {
        eParagraph.removeClass("cursor");
        eHeader.addClass("cursor");
        eHeader.text(eHeader.text().substring(0, eHeader.text().length - 1));
      }
      setTimeout(function(){ typeWriter(id, ar); }, speedBackspace);

    // If neither head or paragraph still has text, switch to next quote in array and start typing.
    } else { 

      isBackspacing = false;
      i = 0;
      isParagraph = false;
      a = (a + 1) % ar.length; //Moves to next position in array, always looping back to 0
      setTimeout(function(){ typeWriter(id, ar); }, 50);

    }
  }
}

//用于跟踪键入的字母数量的值，这些字母引用要使用的字母。等等。不要更改这些值。
var i=0，
a=0，
IsBackspace=false，
isParagraph=false；
//键入文字内容。使用管道指示第二行“|”的起点。
var textArray=[
“这行将显示video-1.jpg”，
“这将显示video-2.jpg”
];
//键入的速度（毫秒）。
var speedForward=100，//输入速度
speedWait=1000，//在键入和退格之间等待
speedBetweenLines=1000，//在第一行和第二行之间等待
speedBackspace=25//退格速度
//循环
打字机（“输出”，文本数组）；
多功能打字机（id、ar）{
变量元素=$（“#”+id），
aString=ar[a]，
eHeader=element.children（“h1”），//Header元素
eParagraph=element.children（“p”）；//子标题元素
//确定动画应该是键入还是退格
如果（！IsBackspace）{
//如果尚未键入完整字符串，请继续键入
如果（i0 | | eParagraph.text（）.length>0）{
//如果段落仍有文本，请继续删除，否则切换到页眉。
如果（eParagraph.text（）.length>0）{
text（eParagraph.text（）.substring（0，eParagraph.text（）.length-1））；
}else if（eHeader.text（）.length>0）{
eParagraph.removeClass（“光标”）；
eHeader.addClass（“游标”）；
text（eHeader.text（）.substring（0，eHeader.text（）.length-1））；
}
setTimeout（函数（）{typeWriter（id，ar）；}，speedBackspace）；
//若标题或段落都并没有文本，那个么切换到数组中的下一个引号并开始键入。
}否则{
IsBackspace=false；
i=0；
isParagraph=false；
a=（a+1）%ar.length；//移动到数组中的下一个位置，始终循环回0
setTimeout（函数（）{typeWriter（id，ar）；}，50）；
}
}
}

您可以使用

图像

对象

var images = {
  0: { 
  "urls": [
     "https://i.ytimg.com/vi/d_T5P-zIIAs/maxresdefault.jpg",
     "https://i.ytimg.com/vi/kpvKA0vhaT0/maxresdefault.jpg"
  ]},
  1: {
  "urls": [
     "https://i.ytimg.com/vi/kpvKA0vhaT0/maxresdefault.jpg",
     "https://i.ytimg.com/vi/d_T5P-zIIAs/maxresdefault.jpg"
  ]},
  2: { 
    "urls": [
     "https://i.ytimg.com/vi/d_T5P-zIIAs/maxresdefault.jpg",
     "https://i.ytimg.com/vi/kpvKA0vhaT0/maxresdefault.jpg"
  ]}
}

然后使用函数更改图像

function changeImage(number) {
  var imagesArr = [];
  images[number].urls.forEach(function(url){
    imagesArr.push('<img src="'+ url +'">');
  });

  $('.images').html(imagesArr);
}

---

工作示例：

我已经修改了您的代码，请检查，代码不工作。第一行显示时显示第一个图像，第一行消失时消失。第二个图像显示第二行开始的时间和结束时消失的时间，并在键入文本时再次显示第一个图像。这是一个循环。谢谢。是的，对不起，我的错，试试这个。我相信工作示例没有更新，所以它不工作。是的，对不起，我的错，试试这个。这是超越完美的。非常感谢你。将添加一些动画效果，这将是很好的去。再次感谢：）

var images = {
  0: { 
  "urls": [
     "https://i.ytimg.com/vi/d_T5P-zIIAs/maxresdefault.jpg",
     "https://i.ytimg.com/vi/kpvKA0vhaT0/maxresdefault.jpg"
  ]},
  1: {
  "urls": [
     "https://i.ytimg.com/vi/kpvKA0vhaT0/maxresdefault.jpg",
     "https://i.ytimg.com/vi/d_T5P-zIIAs/maxresdefault.jpg"
  ]},
  2: { 
    "urls": [
     "https://i.ytimg.com/vi/d_T5P-zIIAs/maxresdefault.jpg",
     "https://i.ytimg.com/vi/kpvKA0vhaT0/maxresdefault.jpg"
  ]}
}

function changeImage(number) {
  var imagesArr = [];
  images[number].urls.forEach(function(url){
    imagesArr.push('<img src="'+ url +'">');
  });

  $('.images').html(imagesArr);
}

// If neither head or paragraph still has text, switch to next quote in array and start typing.
} else {
   changeImage(a);
}