replaceChild () для перемещения изображений, функционирующих только один раз в JavaScript

Question

У меня есть 3 изображения рядом, и я должен поместить 2 кнопки под ними.Нажав кнопку «Вперед», изображения должны двигаться вперед, менять места и двигаться назад, и наоборот.Я пытался сделать это с массивами, но он не отвечает.Он перемещается только один раз и выполняет одно и то же действие в один клик вперед или назад.Я вставил свой код в кодовое поле, пожалуйста, посмотрите.Вставка кода здесь доставляет мне неприятности.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();

Answer 2

Вот рабочий код.Я просто удаляю элемент и добавляю его в конец, или динамически вставляю перед первым элементом.

  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]); 
    }