Question

所以现在我已经想出如何交换两张图像，我发现我必须再次这样做，但现在有4张图像，只要点击按钮，每张图像都会向左旋转。我尝试使用与两个图像相同的代码，但它将每张图片转换为earthrise.jpg。这是我的代码

function rotateLeft() {
    var image1 = document.getElementById("image1")
    var image2 = document.getElementById("image2")
    var image3 = document.getElementById("image3")
    var image4 = document.getElementById("image4")
    if (image1.src.indexOf('/jmurphy9/111/images/earthrise.jpg')>-1) {
        image1.src = '/jmurphy9/111/images/earth.jpg';
    }
    if (image1.src.indexOf('/jmurphy9/111/images/earth.jpg')>-1) {
        image1.src = '/jmurphy9/111/images/maine.jpg';
    }
    if (image1.src.indexOf('/jmurphy9/111/images/maine.jpg')>-1) {
        image1.src = '/jmurphy9/111/images/baywindows.jpg';
    }
    if (image1.src.indexOf('/jmurphy9/111/images/baywindows.jpg')>-1) {
        image1.src = '/jmurphy9/111/images/earthrise.jpg';
    }            
    if (image2.src.indexOf('/jmurphy9/111/images/earthrise.jpg')>-1) {
        image2.src = '/jmurphy9/111/images/earth.jpg';
    }
    if (image2.src.indexOf('/jmurphy9/111/images/earth.jpg')>-1) {
        image2.src = '/jmurphy9/111/images/maine.jpg';
    }
    if (image2.src.indexOf('/jmurphy9/111/images/maine.jpg')>-1) {
        image2.src = '/jmurphy9/111/images/baywindows.jpg';
    }
   if (image2.src.indexOf('/jmurphy9/111/images/baywindows.jpg')>-1) {
        image2.src = '/jmurphy9/111/images/earthrise.jpg';
    }      
    if (image3.src.indexOf('/jmurphy9/111/images/earthrise.jpg')>-1) {
        image3.src = '/jmurphy9/111/images/earth.jpg';
    }
     if (image3.src.indexOf('/jmurphy9/111/images/earth.jpg')>-1) {
        image3.src = '/jmurphy9/111/images/maine.jpg';
    }
    if (image3.src.indexOf('/jmurphy9/111/images/maine.jpg')>-1) {
        image3.src = '/jmurphy9/111/images/baywindows.jpg';
    }
    if (image3.src.indexOf('/jmurphy9/111/images/baywindows.jpg')>-1) {
        image3.src = '/jmurphy9/111/images/earthrise.jpg';
    }    
    if (image4.src.indexOf('/jmurphy9/111/images/earthrise.jpg')>-1) {
        image4.src = '/jmurphy9/111/images/earth.jpg';
    }
    if (image4.src.indexOf('/jmurphy9/111/images/earth.jpg')>-1) {
        image4.src = '/jmurphy9/111/images/maine.jpg';
    }
    if (image4.src.indexOf('/jmurphy9/111/images/maine.jpg')>-1) {
        image4.src = '/jmurphy9/111/images/baywindows.jpg';
    }
    if (image4.src.indexOf('/jmurphy9/111/images/baywindows.jpg')>-1) {
        image4.src = '/jmurphy9/111/images/earthrise.jpg';
    }      
}

function init(){
    var button1 = document.getElementById("btn1")
    button1.onclick = rotateLeft;
    }

window.onload = init;

就像我说的，当点击按钮时，它会将每张图片更改为earthrise.jpg并且我不确定原因。

Answer 1

如果4个图像可以包含在span或div中，请通过将第一个图像附加到父容器来向左旋转。它将移动到最后一个位置，如果其他图像没有绝对位于其父级中，则其他图像将向上或向上滑动。无论身份或来源是什么并不重要 -

btn.onclick = rotateLeft;

如果它们是容器中唯一的内容：

function rotateLeft(pa){
    var pa= pa || document.getElementById('shiftingImageContainer');
    pa.appendChild(pa.firstChild);
}

或者如果它们被页面上的其他内容分开：

function rotateLeft(pa){
    var pa= pa || document.getElementById('shiftingImageContainer');
    pa.appendChild(pa.getElementsByTagName('img')[0]);
}

旋转4张图像的位置

1 个答案: