javascript - replaceChild() 移动图像仅在 javascript 中运行一次

Question

我有 3 个并排的图像，我必须在它们下面放置 2 个按钮。单击前进，图像应向前移动并改变位置，然后向后移动，反之亦然。我试图用数组完成这项工作，但它没有响应。它只移动一次，无论是向前还是向后，单击一次都会执行相同的操作。我把我的代码贴在codepen里了，请看一下。在这里粘贴代码给我带来了麻烦。 https://codepen.io/anon/pen/JqZPVW

function goleft(){
    imgscroll[0] = document.createElement("imgscl");
    imgscroll[1] = document.createElement("imgscl");
    imgscroll[2] = document.createElement("imgscl");

    for(var index=0 ; index < 3; index++)
    {
        legendChildNodes[index] = document.getElementById("legends").childNodes[index];
        imgscroll[index].src = imgArray[index];
    }
    if(imgArray[0] == document.getElementById("legends").childNodes[0].src)
    {
        document.getElementById("legends").replaceChild(imgscroll[1], legendChildNodes[0]);
        document.getElementById("legends").replaceChild(imgscroll[2], legendChildNodes[1]);
        document.getElementById("legends").replaceChild(imgscroll[0], legendChildNodes[2]);
    }
    else if (imgArray[0] == document.getElementById("legends").childNodes[1].src)
    {
        document.getElementById("legends").replaceChild(imgscroll[2], legendChildNodes[0]);
        document.getElementById("legends").replaceChild(imgscroll[0], legendChildNodes[1]);
        document.getElementById("legends").replaceChild(imgscroll[1], legendChildNodes[2]);
    }
    else if (imgArray[0] == document.getElementById("legends").childNodes[2].src)
    {
        document.getElementById("legends").replaceChild(imgscroll[0], legendChildNodes[0]);
        document.getElementById("legends").replaceChild(imgscroll[1], legendChildNodes[1]);
        document.getElementById("legends").replaceChild(imgscroll[2], legendChildNodes[2]);
    }
}

如果有人可以帮助我。

Answer 1

作为上面动态附加图像节点的答案...，虽然每次您向左或向右移动时都会渲染整个区域。 (但只有一次加载图像)；

此处引用代码:https://codepen.io/JohnnyWang0530/pen/OYEJaJ

<div id="legends"></div>
<button onclick="goTo('left')">GO LEFT</button>
<button onclick="goTo('right')">GO RIGHT</button>

#legends img {
  width: 300px;
  margin: 0 5px;
}

// Create image Src
let imgSrc = [
  "https://imagizer.imageshack.com/img921/9646/HCBvlG.jpg",
  "https://imagizer.imageshack.com/img924/3295/Fb6gMO.jpg",
  "https://imagizer.imageshack.com/img923/6089/01GQK7.jpg"
];
// Create image Nodes for use later
let imgNodes = [];

// Init images & dynamically append them into "legend"
function createImages() {
  let legend = document.getElementById('legends');

  // create image nodes at first time executing
  if (imgNodes.length === 0) {
    for (let i=0;i<imgSrc.length;i++) {
      imgNodes[i] = document.createElement('IMG');
      imgNodes[i].src = imgSrc[i];
    }
  }

  // clear all each time you press left or right
  legend.innerHTML = '';

  // append image nodes
  for (let i=0;i<imgNodes.length;i++) {
    legend.appendChild(imgNodes[i]);
  }
}

// function for goLeft & goRight
function goTo(direct) {
  let output = [];
  for (let i=0;i<imgNodes.length;i++) {
    if (direct === 'left') {
      output[i] = imgNodes[i + 1];
      output[imgNodes.length - 1] = imgNodes[0];
    } else if (direct === 'right') {
      output[i] = imgNodes[i - 1];
      output[0] = imgNodes[imgNodes.length - 1];
    }
  }
  imgNodes = output;
  createImages();
}

// Initiate the function
createImages();