Javascript 图像向右旋转_Javascript

Javascript 图像向右旋转

javascript

Javascript 图像向右旋转,javascript,Javascript,我在一个HTML页面中有4个图像：1.png、2.png、3.png和4.png。我希望当用户在图像3中单击时，执行到各种图像右侧的旋转。（将图像1替换为图像3，将图像2替换为图像1，将图像4替换为图像2，将图像3替换为图像4）这是我尝试过的代码，但不起作用： <!doctype html> <html> <head> <meta charset="UTF-8"> <script type="tex

我在一个HTML页面中有4个图像：1.png、2.png、3.png和4.png。我希望当用户在图像3中单击时，执行到各种图像右侧的旋转。（将图像1替换为图像3，将图像2替换为图像1，将图像4替换为图像2，将图像3替换为图像4）

这是我尝试过的代码，但不起作用：

<!doctype html>
<html>
    <head>
        <meta charset="UTF-8">
        <script type="text/javascript">

            function rotation()
            {
                img1 = document.getElementById('img1');
                img2 = document.getElementById('img2');
                img3 = document.getElementById('img3');
                img4 = document.getElementById('img4');

                img2.parentNode.appendChild(img4);
                img1.parentNode.appendChild(img2);
                img3.parentNode.appendChild(img1);
                img4.parentNode.appendChild(img3);

            }
        </script>
        <style type="text/css">
            table
            {
                margin-left:auto;
                margin-right:auto;
            }
        </style>
    </head>
    <body>
        <table class="centrer">
            <tr>
                <td><img src="exercice1/1.png" alt="Image 1" id="img1"></td>
                <td><img src="exercice1/2.png" alt="Image 2" id="img2"></td>
            </tr>
            <tr>
                <td><img src="exercice1/3.png" alt="Image 3" id="img3" onclick="rotation()"></td>
                <td><img src="exercice1/4.png" alt="Image 4" id="img4"></td>
            </tr>
        </table>
    </body>
</html>

第二次，他们的命令是这样的：

2
1  3  4

2  1  3  4

我希望他们的订单是这样的：

2
1  3  4

2  1  3  4

轮换前：

1  2
3  4

轮换后：

3  1
4  2

现在发生了什么？我的猜测是，移动元素时，元素的父节点正在发生变化：

<!doctype html>
<html>
    <head>
        <meta charset="UTF-8">
        <script type="text/javascript">

            function rotation()
            {
                var img1 = document.getElementById('img1'),
                    img2 = document.getElementById('img2'),
                    img3 = document.getElementById('img3'),
                    img4 = document.getElementById('img4'),
                    cont1 = img1.parentNode,
                    cont2 = img2.parentNode,
                    cont3 = img3.parentNode,
                    cont4 = img4.parentNode;

                cont2.appendChild(img4);
                cont1.appendChild(img2);
                cont3.appendChild(img1);
                cont4.appendChild(img3);

            }
        </script>
        <style type="text/css">
            table
            {
                margin-left:auto;
                margin-right:auto;
            }
        </style>
    </head>
    <body>
        <table class="centrer">
            <tr>
                <td><img src="exercice1/1.png" alt="Image 1" id="img1"></td>
                <td><img src="exercice1/2.png" alt="Image 2" id="img2"></td>
            </tr>
            <tr>
                <td><img src="exercice1/3.png" alt="Image 3" id="img3" onclick="rotation()"></td>
                <td><img src="exercice1/4.png" alt="Image 4" id="img4"></td>
            </tr>
        </table>
    </body>
</html>


函数旋转（）
{
var img1=document.getElementById（'img1'），
img2=document.getElementById（'img2'），
img3=document.getElementById（'img3'），
img4=document.getElementById（'img4'），
cont1=img1.parentNode，
cont2=img2.parentNode，
cont3=img3.parentNode，
cont4=img4.parentNode；
续2.附肢儿童（img4）；
续1.追加子项（img2）；
续3.追加儿童（img1）；
续4.附肢儿童（img3）；
}
桌子
{
左边距：自动；
右边距：自动；
}

更改

src

属性。像这样：

function rotation()
{
    img1 = document.getElementById('img1');
    img2 = document.getElementById('img2');
    img3 = document.getElementById('img3');
    img4 = document.getElementById('img4');

    src1 = img1.src;
    src2 = img2.src;
    src3 = img3.src;
    src4 = img4.src;

    img2.src = src4;
    img1.src = src2;
    img3.src = src1;
    img4.src = src3;
}

查看我所做的修改，这是唯一需要的修复，跟踪父节点和子节点，这样子节点在交换位置时不会混淆（因为在最后一步中，第四个图像已经被移动）。您需要将img 4的这一行修改为document.getElementById（'img3'）否则这个代码工作得很好我喜欢这样，非常聪明。我无法更改图像源，因为如果我更改了图像源，我还有其他功能将无法工作。你可以在我之前的帖子中看到：如果我使用这种方法，我将面临一个问题：当图像1占据图像3的位置时，我必须在下次单击图像1进行旋转