replaceChild（）在javascript中只移动一次图像

我有3个并排的图像，我必须在它们下面放两个按钮。单击“前进”，图像应向前移动并更改位置，然后向后移动，反之亦然。 我试图用数组来完成这项工作，但它没有响应。它只移动一次，并在一次单击上执行相同的操作，无论是向前还是向后。我已经把代码贴在密码笔里了，请看一下。在这里粘贴代码给我带来了麻烦。

函数goleft（）{
imgscroll[0]=document.createElement（“imgscl”）；
imgscroll[1]=document.createElement（“imgscl”）；
imgscroll[2]=document.createElement（“imgscl”）；
对于（var指数=0；指数<3；指数++）
{
legendChildNodes[index]=document.getElementById（“图例”）.childNodes[index]；
imgscroll[index].src=imgaray[index]；
}
if（imgArray[0]==document.getElementById（“图例”）.childNodes[0].src）
{
document.getElementById（“图例”）.replaceChild（imgscroll[1]，legendChildNodes[0]）；
document.getElementById（“图例”）.replaceChild（imgscroll[2]，legendChildNodes[1]）；
document.getElementById（“图例”）.replaceChild（imgscroll[0]，legendChildNodes[2]）；
}
else if（imgArray[0]==document.getElementById（“图例”）.childNodes[1].src）
{
document.getElementById（“图例”）.replaceChild（imgscroll[2]，legendChildNodes[0]）；
document.getElementById（“图例”）.replaceChild（imgscroll[0]，legendChildNodes[1]）；
document.getElementById（“图例”）.replaceChild（imgscroll[1]，legendChildNodes[2]）；
}
else if（imgArray[0]==document.getElementById（“图例”）.childNodes[2].src）
{
document.getElementById（“图例”）.replaceChild（imgscroll[0]，legendChildNodes[0]）；
document.getElementById（“图例”）.replaceChild（imgscroll[1]，legendChildNodes[1]）；
document.getElementById（“图例”）.replaceChild（imgscroll[2]，legendChildNodes[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]); 
    }

---

如上所述，动态附加图像节点…，但每次向左或向右移动时都会渲染整个区域。（但图像只需一次加载）

请参阅此处的代码：

向左走
向右转

#图例img{
宽度：300px；
利润率：0.5px；
}

//创建图像Src
设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"
];
//创建图像节点以供以后使用
设imgNodes=[]；
//初始化图像&动态地将它们附加到“图例”中
函数createImages（）{
让legend=document.getElementById（'legends'）；
//第一次执行时创建映像节点
if（imgNodes.length==0）{
例如（设i=0；我想让最左边的图像在按下左键时消失，还是让它循环出现在右边？谢谢，我很惊讶这段代码实际上是多么简单。谢谢，这非常有用。它还详细阐述了abelito的答案。
  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]); 
    }