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
    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
    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.stack.imgur.com/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. el 30 ene. 2019 a las 0:56

Tu Respuesta

Al pulsar en “Publica tu respuesta”, muestras tu consentimiento a nuestros términos de servicio, política de privacidad y política de cookies

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