Tengo 3 gráficas, las cuales quiero que se vean una por una de manera ordenada (1,2,3) y al llegar al final, o sea a la última gráfica, estas se repitan.
Es decir, Todas las gráficas están escondidas, no se ve ninguna, al cargar la página se muestra la primer gráfica, luego de 5 segundos esta primer gráfica desaparece y en reemplazo de la primera entra la segunda y así hasta completar todo el ciclo.
Estuve buscando pero la verdad no halle algo funcional para lo que quiero hacer, después de un rato esto es lo que tengo:
Código HTML :
<div class="image right" id="graph_1" style="display: none;"> <h2> title</h2> <h3> text</h3> <img src="/images/graph_1.png" /> </div> <div class="image right" id="graph_2" style="display: none;"> <h2> title</h2> <h3> text</h3> <img src="/images/graph_2.png" /> </div> <div class="image right" id="graph_3" style="display: none;"> <h2> title</h2> <h3> text</h3> <img src="/images/graph_3.png" /> </div>
Código Javascript :
$next = "#graph_1";
if($next = "#graph_1"){
$($next).delay(1000).fadeIn('fast');
$('.fold_inboundoutbound .image').delay(5000).fadeOut('slow');
$next = "#graph_2";
}
if($next = "#graph_2"){
$($next).delay(1000).fadeIn('fast');
$('.fold_inboundoutbound .image').delay(5000).fadeOut('slow');
$next = "#graph_3";
}
if($next = "#graph_3"){
$($next).delay(1000).fadeIn('fast');
$('.fold_inboundoutbound .image').delay(5000).fadeOut('slow');
$next = "#graph_1";
}Como podrán notar no es la gran cosa, es un código muy rustico.
Como es de notarse al llegar a la gráfica 3 no me retorna a la gráfica uno... y hasta ahí llega todo.
