images rotation right

У меня 4 изображения на HTML-странице: 1.png, 2.png, 3.png и 4.png. Я хочу, когда пользователь нажимает на изображение 3, выполняется поворот справа от различных изображений. (заменить изображение 1 на изображение 3, изображение 2 по изображению 1, изображение 4 по изображению 2 и изображение 3 по изображению 4).images rotation right

это код, который я пытался, но он не будет работать:

<!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>

Проблема заключается в том, когда я нажимаю в первый раз на изображение 3 изображения упорядочены следующим образом:

2 
1 3 4

и во второй раз они ordred так:

2 1 3 4

и я хочу, чтобы они были заказаны, как это:

перед тем вращения:

1 2 
3 4

после вращения:

3 1 
4 2

источник

2013-02-20 Ichigo Kurosaki

jsfiddle пожалуйста – martriay

И что происходит вместо этого? Я думаю, что ParentNode элементы меняются при перемещении:

<!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>

источник

2013-02-20 21:29:35 martriay

увидеть изменения я сделал –

Да, это единственное исправление необходимо, отслеживание родительских узлов, а также дочерние узлы, так что ребенок узлы Дон» t запутаться при замене местоположений (поскольку на последнем шаге четное изображение уже было перемещено). –

вы должны изменить эту строку img 4 на document.getElementById ('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; 
}

http://jsfiddle.net/gJK8D/2/

источник

2013-02-20 21:46:11

Мне нравится этот путь, довольно умный – martriay

unforthunatly Я не могу изменить источник изображений, потому что У меня есть другая функция, которая не будет работать, если я изменил исходный код изображения, который вы можете увидеть в моем предыдущем сообщении: http://stackoverflow.com/questions/14989245/move-the-mouse-pointer-over-an-image/ –

также, если бы я использовал этот метод, мне придется столкнуться с проблемой, что, когда изображение 1 занимает изображение 3-го места, я должен щелкнуть в следующий раз на изображении 1, чтобы сделать поворот –

images rotation right

ответ

Смежные вопросы