Anular la función de clearInterval

[gcrlink]

Saludos a todos...

¿Abrá alguna manera de desactivar la función de clearInterval()?

Me explico. Estoy probando una galería de imágenes que tiene el siguiente código:

Código HTML:

<div id="titulo">
<h1>GALERÍA DE FOTOS CON CSS + JAVASCRIPT</h1>
</div>
 
<div id="boton">
<input id="button" type="button" value="mas fotos" onclick="javascript: llamar()"></input><br/>
<input id="button" type="button" value="Mariano Civico"></input><br/>
<input id="button" type="button" value="Grupo Niche"></input><br/>
<input id="button" type="button" value="Plan B"></input>
</div>
 
<div id="galeria">
<a href="#"><img class="small" src="1.jpg" alt="" /><span><img src="1.jpg" alt="" /></span></a>
<a href="#"><img class="small" src="2.jpg" alt="" /><span><img src="2.jpg" alt="" /></span></a>
<a href="#"><img class="small" src="3.jpg" alt="" /><span><img src="3.jpg" alt="" /></span></a>
<a href="#"><img class="small" src="4.jpg" alt="" /><span><img src="4.jpg" alt="" /></span></a>
<a href="#"><img class="small" src="5.jpg" alt="" /><span><img src="5.jpg" alt="" /></span></a>
<a href="#"><img class="small" src="6.jpg" alt="" /><span><img src="6.jpg" alt="" /></span></a>
<a href="#"><img class="small" src="7.jpg" alt="" /><span><img src="7.jpg" alt="" /></span></a>
<a href="#"><img class="small" src="9.jpg" alt="" /><span><img src="9.jpg" alt="" /></span></a>
<a href="#"><img class="small" src="10.jpg" alt="" /><span><img src="10.jpg" alt="" /></span></a>
<a href="#"><img class="small" src="11.jpg" alt="" /><span><img src="11.jpg" alt="" /></span></a>
</div>
 
<div id="img_grande">
<h1>Pasa el cursor por las imágenes para verlas más grandes</h1>
</div>
 

La capa galería tiene como parámetro de estilo un overflow: hidden. Jugando un poco con document.getElementById('galeria').scrollTop y también con setInterval y clearInterval logré obtener que al hacer click sobre un botón las imágenes se vallan desplazando una a una de manera controlada. El javascript queda de la sigueinte manera:

Código Javascript:

<script type="text/javascript">
<!--
var img = 79;
var move = 0;
var time;
function masImagenes()
{
move += 1;
if (move < img*4)
{
  document.getElementById('galeria').scrollTop = move;
}
if (move == img || move == img*2 || move == img*3 || move == img*4)
{
  clearInterval(time);
}
}
function llamar()
{
time = setInterval('masImagenes()',10);
if (move == 316)
{
  document.getElementById('galeria').scrollTop = 0;
}
}
// -->
</script>
 

Luego de que el desplazamiento de imágenes alcanza el valor de img*4 (o sea 316) la posición de las imágenes regresa a su estado inicial, o sea scrollTop = 0.

El problema que tengo es que quiero que cuando la galería regrese a su estado inicial pueda llamar a la función nuevamente una y otra vez. Como si fuera un loop infinito.

Alguien me puede ayudar con esto. Se lo agradezco de antemano.

[pato12]

Intenta llamando a la función llamar() cuando se termina.. es decir:

Código Javascript:

clearInterval(time);
llamar();
 

[gcrlink]

Iniciado por pato12

Intenta llamando a la función llamar() cuando se termina.. es decir:

Código Javascript:

clearInterval(time);
llamar();
 

Saludos pato12...

Gracias por tu pronta respuesta .

Pues ya había intentado lo de llamar a la función. Como quiera lo intenté de nuevo y lo que hace es que al hacer click sobre el botón el clearInterval no se ejecuta y de una el desplazamiento va desde img hasta img*4. Y pues no me permite el loop.


Seguiré estidiando y probando el código haber que es lo que puedo implementar o cambiar.

Si alguien tiene otra sugerencia o consejo se le agradece.

[pato12]

Ah espera, proba resetiando la variable move .. :P (volvela a 0)

[gcrlink]

Iniciado por pato12

Ah espera, proba resetiando la variable move .. :P (volvela a 0)

Saludos pato12.

Pues siguiendo tu consejo funcionó lo del loop.

El problema que tengo ahora es que cuando comienza el loop, no hace una pausa en la primera imagen y entra directamente al desplazamiento hacia la segunda imagen, o sea no para en 0 y comienza directamente a avanzar hacia img (que es igual a 79).

Pero nada tu aporte ha sido de mucha ayuda hasta ahora. Le seguiré buscando al código haber como puedo seguir mejorándolo. Por cierto el mismo quedó de la siguiente manera:

Código Javascript:

<script type="text/javascript">
<!--
var img = 79;
var move = 0;
var time;
function masImagenes()
{
move += 1;
if (move < 316)
{
  document.getElementById('galeria').scrollTop = move;
}
if (move == img || move == 158 || move == 237 || move == 316) 
{
  clearInterval(time);
}
}
function llamar()
{   
 time = setInterval('masImagenes()',10);
if (move == 316)
{
  move = 0;
  document.getElementById('galeria').scrollTop = move;
}
}
// -->
</script>
 

Gracias...

[pato12]

Ponele un setTimeout para llamar a llamar()... así va a tener una pausa.. :P

[gcrlink]

Iniciado por pato12

Ponele un setTimeout para llamar a llamar()... así va a tener una pausa.. :P

Hola pato12...

Intenté lo que me dices pero me parece que quizás el problema soy yo pues sólo llevo unos meses aprendiendo javascript y creo que puede ser lo siguiente:

1. O no estoy escribiendo el setTimeout donde es debido

2. O no le estoy asignando el valor de tiempo correcto para causar el efecto deseado.

El Código me queda de la siguiente manera:

Código Javascript:

<script type="text/javascript">
<!--
var img = 79;
var move = 0;
var time;
function masImagenes()
{
move += 1;
if (move < 316)
{
  document.getElementById('galeria').scrollTop = move;
}
if (move == img || move == 158 || move == 237 || move == 316) 
{
  clearInterval(time);
}setTimeout("llamar()",0);
}
function llamar()
{   
 
time = setInterval('masImagenes()',10);
 
if (move == 316)
{
  move = 0;
  document.getElementById('galeria').scrollTop = move;
    setTimeout("llamar()",0);
} 
}
// -->
</script>
 

De esta forma cuando llamo a la Función haciendo CLICK en el botón las imágenes pasan muy rápido y no se cumple el efecto deseado.

Ya lo he situado en otras partes pero no he tenido suerte.

Ojalá me puedas ayudar un poco con esta prueba... de antemano gracias.

[pato12]

Prueba así:

Código Javascript:

<script type="text/javascript">
<!--
var img = 79;
var move = 0;
var time;
function masImagenes()
{
move += 1;
if (move < img*4)
{
&#160; document.getElementById('galeria').scrollTop = move;
}
if (move == img || move == img*2 || move == img*3 || move == img*4)
{
&#160; move = 0;
&#160; clearInterval(time);
&#160; setTimeout("llamar();",2*1000); // 2 segundos esperamos y llamo a llamar :P
}
}
function llamar()
{
time = setInterval('masImagenes()',10);
if (move == 316)
{
&#160; document.getElementById('galeria').scrollTop = 0;
}
}
// -->
</script>
 

[gcrlink]

Saludos pato12....

Disculpa el no haberte respondido antes pero es que estuve fuera de mi país y pues no tuve tiempo para concentrarme en el script.

Intenté lo que me propones con el uso de setTimeout pero no me funcionó. Al fin que después de pensarle la pausa que requería la logré con un clearInterval dentro de la función llamar().

El Código quedó de la sigiuente manera:

Código Javascript:

<script type="text/javascript">
<!--
var img = 79;
var move = 0;
var time;
function masImagenes()
{
move += 1;
if (move < img)
{
  document.getElementById('galeria').scrollTop = move;
}
if (move == img || move == img*2|| move == img*3 || move == img*4) 
{
  clearInterval(time);
}
}
function llamar()
{   
time = setInterval('masImagenes()',10);
 
if (move == img*4)
{
  move = 0;
  document.getElementById('galeria').scrollTop = move;
  clearInterval(time);
} 
}
// -->
</script>
 

GRACIAS por tu ayuda...