1

Hola estoy practicando haciendo un slideshow y me salta de la imagen 1 a la 4.

var imgs = document.getElementById("idimg").getElementsByTagName("img");
	var i = 0;

	function slideshow () {
		for(var n = i; n <= imgs.length; n++){
			imgs[i].style.zIndex = "5";
		}
	}

	setInterval(slideshow, 500);
.uno {
			position: absolute;
			z-index: 1;
		}
		.dos {
			position: absolute;
			z-index: 2;
		}
		.tres {
			position: absolute;
			z-index: 3;
		}
		.cuatro {
			position: absolute;
			z-index: 4;
		}
<div id="idimg">
	<img class="uno" src="image-1.gif">
	<img class="dos" src="image-2.gif">
	<img class="tres" src="image-3.gif">
	<img class="cuatro" src="image-4.gif">
</div>

2
  • En tu for imgs[i] no deberias poner imgs[n]?
    – Nadie
    Commented el 29 ene. 2019 a las 23:22
  • Bienvenido al sitio, Solo necesitas un contenedor donde muestres las imagenes, te sugiero revisar el for. Recuerda revisar Cómo preguntar y No olvides realizar el recorrido de bienvenida para conocer el funcionamiento del sitio, saludos!.
    – Jorgesys
    Commented el 30 ene. 2019 a las 0:19

1 respuesta 1

0

Para que obtengas todos los elementos <img te sugiero usar la variable i, inicializarla e incrementarla hasta el valor de la cantidad de elementos imgs.length :

function slideshow () {
       for(var i = 0; i <= imgs.length; i++){
           img.src =  imgs[i].src;
        }
    }

Si deseas realizar un slide te sugiero lo realices de esta forma, donde solo necesitas un elemento <img donde se mostrarían las imágenes definidas en el arreglo:

    window.onload = function() {
    var image=document.getElementById("aaa");
    var img_array=["image-1.gif","image-2.gif","image-3.gif","image-4.gif"];
    var index=0;
    var interval = 500;
    function slide() {
        document.getElementById("myimage").src = img_array[index++%img_array.length];
    }

    setInterval(slide, interval);
}

Ejemplo:

    window.onload = function() {
    var image=document.getElementById("aaa");
    var img_array=["https://media.wired.com/photos/5926db217034dc5f91becd6b/master/w_1904,c_limit/so-logo-s.jpg","https://responsivedesign.is/wp-content/uploads/2014/10/be-inspired.svg","https://static1.squarespace.com/static/5712c8b91d07c0fc4a29034d/t/59b010946e9329024be40bd4/1504655639343/6010d66c21d9b0090027d8e89641a467-idea-light-bulb-school-by-vexels.png","https://upload.wikimedia.org/wikipedia/commons/8/84/Example.svg", "https://i.sstatic.net/6JLYC.png"];
    var index=0;
    var interval = 500;
    function slide() {
		document.getElementById("myimage").src = img_array[index++%img_array.length];
    }

    setInterval(slide, interval);
}
<div id="imagenes">
   <img id="myimage" width="100px" height="100px">
</div>

1
  • Este codigo es para imagenes online como se adapta para local. Hay una variable image que es undefined. Commented el 30 ene. 2019 a las 0:56

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.