0

estoy intentando hacer esto:

  • con 4 imagenes, que al pulsar sobre cualquiera de las imágenes se cambien de posición de manera secuencial todas, es decir, que en primer lugar se muestra la segunda imagen, en segundo lugar la tercera imagen, en tercer lugar la cuarta imagen y en último lugar la primera imagen. Y así cada vez que se pulse sobre ellas.

estoy intentando con un ciclo for, pero nada, no se como aplicarlo a cada imagen.

<img id='imagen1' src="img/1.jpg" alt="imagen muestra 1" onclick="rotarImagen()"><br>
<img id='imagen2' src="img/2.jpg" alt="imagen muestra 2" onclick="rotarImagen()"><br>
<img id='imagen3' src="img/3.jpg" alt="imagen muestra 3" onclick="rotarImagen()"><br>
<img id='imagen4' src="img/4.jpg" alt="imagen muestra 4" onclick="rotarImagen()">

<div id="imagenes"></div>

<script>
    function rotarImagen() {
        let ilista = document.getElementsByTagName('img');
        for (let i = 0; i < ilista.length; i++) {
            document.getElementById('imagen1').src = 'img/'+i+'.jpg';
            document.getElementById('imagen2').src = 'img/'+i+'.jpg';
            document.getElementById('imagen3').src = 'img/'+i+'.jpg';
            document.getElementById('imagen4').src = 'img/'+i+'.jpg';

        }
    }

</script>

2 respuestas 2

0

Agrega este código el arreglo de order vuélvelo dinámico

let order = [1, 2, 3, 4];
function rotarImagen() {
  const reorder = [...order];
  reorder.unshift(reorder.pop());
  order = [...reorder];
  for (let i = 0; i < order.length; i++) {
    const indexImage = `imagen${i+1}`
    document.getElementById(indexImage).src = `img/${order[i]}.jpg`;
  }
}
2
  • muchas gracias, por la ayuda. he agregado el código, pero solo logro hacer que todar cambien a la misma imagen. perdona soy preincipiante. Commented el 24 jun. 2022 a las 21:44
  • Ok, tu html tiene que estar igual que antes, no tienes que hacerle modificaciones
    – Salazar
    Commented el 24 jun. 2022 a las 22:45
0

logre solucionarlo pero con mucho código.

var img1 = 1;
var img2 = 2;
var img3 = 3;
var img4 = 4;
var imagenes = [1, 2, 3, 4];
for (var i = 0; i < imagenes.length; i++) {
  
  function rotarImagen() {
    if (i == 1) {
      img1 = 4;
      img2 = 1;
      img3 = 2;
      img4 = 3;
      document.getElementById("imagen1").src = `img/${img1}.jpg`;
      document.getElementById("imagen2").src = `img/${img2}.jpg`;
      document.getElementById("imagen3").src = `img/${img3}.jpg`;
      document.getElementById("imagen4").src = `img/${img4}.jpg`;
      
      i = 2;

    } else if (i == 2) {
      img1 = 3;
      img2 = 4;
      img3 = 1;
      img4 = 2;

      document.getElementById("imagen1").src = `img/${img1}.jpg`;
      document.getElementById("imagen2").src = `img/${img2}.jpg`;
      document.getElementById("imagen3").src = `img/${img3}.jpg`;
      document.getElementById("imagen4").src = `img/${img4}.jpg`;

      i = 3;

    } else if (i == 3) {
      img1 = 2;
      img2 = 3;
      img3 = 4;
      img4 = 1;

      document.getElementById("imagen1").src = `img/${img1}.jpg`;
      document.getElementById("imagen2").src = `img/${img2}.jpg`;
      document.getElementById("imagen3").src = `img/${img3}.jpg`;
      document.getElementById("imagen4").src = `img/${img4}.jpg`;

      i = 4;

    } else {
      img1 = 1;
      img2 = 2;
      img3 = 3;
      img4 = 4;

      document.getElementById("imagen1").src = `img/${img1}.jpg`;
      document.getElementById("imagen2").src = `img/${img2}.jpg`;
      document.getElementById("imagen3").src = `img/${img3}.jpg`;
      document.getElementById("imagen4").src = `img/${img4}.jpg`;

      i = 1;
    }    
  }
}

Tu Respuesta

By clicking “Publica tu respuesta”, you agree to our terms of service and acknowledge you have read our privacy policy.

¿No es la respuesta que buscas? Examina otras preguntas con la etiqueta o formula tu propia pregunta.