entre Desarrolladores

Recibe ayuda de expertos

Registrate y pregunta

Es gratis y fácil

Recibe respuestas

Respuestas, votos y comentarios

Vota y selecciona respuestas

Recibe puntos, vota y da la solución

Pregunta

1voto

cambiar imagen despues de cinco segundos

hola chicos no puedo mas con este ejercicio, busco la manera de avanzar por orden desde enero hasta mayo pero con mi codigo corriente salta directamente a mayo
deseo que se la ruta de mi imagen cambie por el orden del indice cada cinco segundos, es decir empieza con enero y despues que pasan los 5 segundos se pasa al siguiente asi hasta llegar a mayo

<img src="clothes/jacket.jpg" id="img">
<button onclick="barajear()">iniciar</button>
<button onclick="detener()">detener</button>
<script type="text/javascript">
files =['enero.jpg', 'febrero.jpg', 'marzo.jpg', 'abril.jpg', 'mayo.jpg']
function barajear(){
    console.log('inicio')
    img = document.getElementById('img')
    intervalo = setInterval(function(){
        for(i=0; i<files.length; i++){
            console.log(files[i])
            img.setAttribute('src', 'clothes/'+files[i])
        }

    }, 5000)
}

function detener(){

    clearInterval(intervalo)
}

</script>

1voto

Alex_Numpaque comentado

1voto

steven comentado

gracias por la sugerencia, ya lo solucione

1 Respuesta

4votos

magarzon Puntos30650

Lo que realiza realmente tu código es que cada 5 segundos, ejecuta una función, que incluye un bucle for que recorre todas las imágenes y termina dejando, claro está, la última del array. Y así, cada 5 segundos.

El contador lo tienes que tener fuera de la función intervalo, y aumentarlo en esta. Además, al llegar al final (mayo), supongo que querrás volver a enero.

Se haría así (utilizando tu propio código modificado):

var files =['enero.jpg', 'febrero.jpg', 'marzo.jpg', 'abril.jpg', 'mayo.jpg'];
var contador = 0;
var intervalo;

function barajear(){
    console.log('inicio')
    img = document.getElementById('img');
    intervalo = setInterval(function(){
       img.setAttribute('src', 'clothes/'+files[contador]);
       contador = contador +1;
       if (contador == files.length) {
          contador = 0;
       }

    }, 5000);
}

Por cierto, aunque javascript no se queje, acostúmbrate a declarar las variables con var (por ejemplo, podrías haber tenido resultados extraños con la variable intervalo, porque no está muy claro su ámbito) y a finalizar con ;

La variable contador se define y se inicia a 0 fuera de la función barajear (es una variable global, por tanto). Si deseas que cada vez que se llame a barajear (cada vez que se haga click en el botón iniciar) empiece de 0 (enero), define e inicia la variable dentro de la función barajear.

1voto

steven comentado

muchisimas gracias maestro, en proposito si quiero hacerlo en orden alterado desde el ultimo hacia el primero solo se tendria que pasarle valores negativos al array no es cierto

1voto

magarzon comentado

Sí, exacto, deberías inicializar el contador a files.length-1 y volver a ponerlo a este valor cuando el contador llegue a 0

1voto

steven comentado

gracias, por casualidad sabes si es posible obtener los metadatos de un archivo multimedia audio y video con puro js, o sino con alguna libreria

Por favor, accede o regístrate para responder a esta pregunta.

Otras Preguntas y Respuestas


...

Bienvenido a entre Desarrolladores, donde puedes realizar preguntas y recibir respuestas de otros miembros de la comunidad.

Conecta