Problema en un "loop" javascript

suaveSHOW #1 Ene '11

Buenas, estoy haciendo un slider con jquery y mi problema viene cuando quiero que automaticamente se vayan cambiando los elementos.

La estructura es así:

<div id="slider">
     <ul>
          <li class="active">1</li>
           <li>2</li>
            <li>3</li>
            <li>4</li>
            <li>5</li>
     </ul>
     <div class="contenido">X CONTENIDO</div>
</div>

El código javascript que tengo es este(Por ahora solo me quería encargar del listado, así que no habrá nada relacionado a cambiar de contenido):
El listado va a ser fijo de 5 elementos.

Javascript

$(document).ready(function(){
	var currID=Number($(".syncmedia ul li.active").text()); //Valor del "li" que tiene clase active
	$("#slider li").click(function(){
		$("#slider li").removeClass("active"); //elimina la clase active de todos los "li"
		$(this).addClass("active"); //añade la clase active al "li" clickeado
	});
	auto(currID); //ejecuta la funcion auto con el valor del "li" activado
});
function auto(i){
	var j=i+1; //valor del proximo "li" a activar
	if(j==6) var j=1; //si llega a 6 tomamos como proximo li el de valor 1
	$("#slider li:nth-child("+i+")").removeClass("active"); //eliminamos la clase del activo
	$("#slider li:nth-child("+j+")").addClass("active"); //añadimos la clase activo al siguiente
	alert(j); //esto es un test que demuestra que funciona y cada 5s(intervalo de abajo) me va mostrando 1,2,3,4,5 y vuelta a empezar 1,2,3...
	setInterval(auto(j),5000); //esta vez ejecutará la funcion auto con la que hemos definido como activa
}

¿Cuál es el problema? Que no se hace el cambio de clases por medio de la funcion auto, solo la primera vez

EDIT: los alert de la funcion auto se la suda el intervalo de 5000, lo hace cada vez k clickeo por rapido que lo haga

NeB1 #2 Ene '11

#1 Hacer un setinterval dentro de una función y que el set interval se llame a si misma es una barbaridad creo yo.

Creo que te has confundido entre setTimeout() y setInterval().

Tal como lo tienes, la primera ejecución creará un intervalo periodico de ese script, la segunda creará otro intervalo de ejecución de esa función, pero la anterior seguirá ejecutandose.

setInterval(func, time) define una función que se ejecutará constantemente cada 'time' tiempo hasta que tu quieras que pare mediante clearInterval();

Lo que quieres hacer creo que sería esto:

var currID = 0;
$(document).ready(function(){
	currID=Number($(".syncmedia ul li.active".text()); //Valor del "li" que tiene clase active
	$("#slider li".click(function(){
		$("#slider li".removeClass("active"; //elimina la clase active de todos los "li"
		$(this).addClass("active"; //añade la clase active al "li" clickeado
	});
	auto(); //ejecuta la funcion auto con el valor del "li" activado
	setInterval(auto(),5000); //esta vez ejecutará la funcion auto con la que hemos definido como activa
});


function auto(){
        var prevID = currID;
	currID++; //valor del proximo "li" a activar
	if(currID==6) var currID=1; //si llega a 6 tomamos como proximo li el de valor 1
	$("#slider li:nth-child("+prevID+"".removeClass("active"; //eliminamos la clase del activo
	$("#slider li:nth-child("+currID+"".addClass("active"; //añadimos la clase activo al siguiente
	alert(currID); //esto es un test que demuestra que funciona y cada 5s(intervalo de abajo) me va mostrando 1,2,3,4,5 y vuelta a empezar 1,2,3...
}

Creo que se pilla lo que hago. Primero, declaro como 'global' la variable donde guardamos que 'slide' está activo. después ejecuto la función auto, y creo un intervalo de ejecución de la función auto (solo uno).

No he probado el código, es posible que contenga errores, pero creo que es el camino adecuado.

suaveSHOW #3 Ene '11

Funciona mejor que el mio, eso desde luego. Solo que tuve que añadir
"currID=Number($(".syncmedia ul li.active").text());"

En la función auto.
Pero sigue sin funcionar, ahora lo que ocurre es que a parte de sudarle el intervalo(lo hace automaticamente) solo lo hace para pasar del li 1 al li 2, y del li 2 al 3, pero no sigue adelante

1 respuesta

NeB1 #4 Ene '11

#3 que xungo xDD puedo ver la web desde una url? o la tienes en local?

Los alerts te muestran 1, 2 y 3?

1 respuesta

suaveSHOW #5 Ene '11

#4 http://www.megustascuandocallas.com/sergiftm/suave/slider.php

Solo he cambiado el id #slider por .syncmedia, pero viene a ser lo mismo

NeB1 #6 Ene '11

lo primero que veo es que hemos puesto

setInterval(auto(),5000);

y es

setInterval("auto()",5000);

con comillas

1 respuesta

suaveSHOW #7 Ene '11

#6, lo he actualizado y sigue igual

1 respuesta

NeB1 #8 Ene '11

#7 lo veo, pero ahora el error es otro (deberías ponerte el firebug para ver los errores). Antes me decía 'useless call to interval' ahora pone:

'auto is not defined' y este error salta cada 5 segundos, o sea, que el intervalo si que funciona.

Ah coño, function auto() tiene que estar fuera de $(document).ready

shaba #9 Ene '11

http://jsfiddle.net/hzWgh/
pd: me lo he inventado no tengo ni idea jaja

1 respuesta

suaveSHOW #10 Ene '11

#9 grande shaba

Gracias por la ayuda de los dos.

Problema en un "loop" javascript

Usuarios habituales

Tags