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.