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

这是一些工作代码。我基本上只是删除元素并将其附加到末尾，或者动态地将其插入到第一个元素之前。

  function goleft() {
         let imageChildNodes = document.getElementById("legends").childNodes;
         let imageList = Array.from(imageChildNodes).filter(function(node) { return node.tagName === 'IMG'; });

         let legendsContainer = document.getElementById("legends");
         legendsContainer.removeChild(imageList[0]);
         legendsContainer.appendChild(imageList[0]);
    }

  function goright() {
         let imageChildNodes = document.getElementById("legends").childNodes;
         let imageList = Array.from(imageChildNodes).filter(function(node) { return node.tagName === 'IMG'; });

         let legendsContainer = document.getElementById("legends");
         legendsContainer.removeChild(imageList[imageList.length - 1]);
         legendsContainer.insertBefore(imageList[imageList.length - 1], imageList[0]); 
    }

Answer 2

如上面的答案动态附加图像节点...，但每次向左或向右移动时都会渲染整个区域。（但只有一次加载图像）；

参考代码：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();

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

replaceChild() to move images functioning only once in javascript

javascript

arrays

dom

children

replace