Poniższy program powoduje utworzenie kanału informacyjnego pojawianie oraz znikanie kolejno bloków informacji. Wybór pojawiającej się informacji poprzez zdarzenie onclick. W poniższym skrypcie pogrubiono ciekawe zdarzenia i właściwości biblioteki jQuery oraz języka Javascipt tj. wykonanie informacji w pętli nieskończonej, zablokowanie domyślnego zachowania elementu link (przekierowanie), wybieranie elementu wewnątrz kontenera na podstawie indeksu.
<nav class="projects_nav">
<a href="#" class="selected"><i class="icon-circle"></i></a>
<a href="#" class=""><i class="icon-circle"></i></a>
<a href="#" class=""><i class="icon-circle"></i></a>
<a href="#" class=""><i class="icon-circle"></i></a>
</nav>
<div class="projects-container">
<div class="projects-tweet" style="display: block; "></div>
<div class="projects-tweet" style="display: none; "></div>
<div class="projects-tweet" style="display: none; "></div>
</div>
<script type="text/javascript">
jQuery(document).ready(function() {
var ProjectsInterval = 7000;
var ile_blokow=3;
var index_number=0;
var amount_of_projects=jQuery(".projects-container .projects-tweet").length;
function slideProjects() {
jQuery(".projects-container .projects-tweet:eq( " + index_number + " )").css("display", "none");
jQuery(".projects_nav a:eq( " + index_number + " )").removeClass( "selected" );
index_number=index_number+1;
if(amount_of_projects==index_number) index_number=0;
jQuery(".projects-container .projects-tweet:eq( " + index_number + " )").css("display", "block");
jQuery(".projects_nav a:eq( " + index_number + " )").addClass( "selected" );
}
var intervalId;
intervalId =setInterval(slideProjects, ProjectsInterval);
jQuery(".projects_nav a").click( function(e) {
e.preventDefault();
clearInterval(intervalId);
index_number=jQuery(this).index();
jQuery(".projects_nav a").removeClass( "selected" );
jQuery(this).addClass( "selected" );
jQuery(".projects-container .projects-tweet").css("display", "none");
jQuery(".projects-container .projects-tweet:eq( " + index_number + " )").css("display", "block");
});
});
</script>