Question

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>

Comments

Prueba la función setTimeOut
https://www.sitepoint.com/jquery-settimeout-function-examples/

---

gracias por la sugerencia, ya lo solucione

Answer 1

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.