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

    }

}

如果有人能帮我解决这个问题。