Presentation Cycle es un plugin de jQuery creado por Gaya Kessler que nos hará presentaciones o transiciones de imágenes con texto y una barra de progreso.

En el ejemplo podemos ver el funcionamiento de este plugin en 3 diferentes formas, la básica, una minimalista y otra aún mas minimalista.

Para implementarlo en una página debemos de incluir en el header las hojas de estilo y archivos del script y del jQuery:

[COPIAR]
Código HTML (Copiar):
  2.     <!-- Stylesheets-->
  3.     <link rel="stylesheet" type="text/css" href="css/presentationCycle.css" />
  4.  
  5.     <!-- Scripts -->
  6.     <script type='text/javascript' src='http://ajax.googleapis.com/ajax/libs/jquery/1.3.2/jquery.min.js?ver=1.3.2'></script>
  7.     <script type='text/javascript' src='js/jquery.cycle.all.min.js'></script>
  8.     <script type='text/javascript' src='js/presentationCycle.js'></script>
  9. </head>

Despúes en el body donde queramos incluimos el container:

[COPIAR]
Código HTML (Copiar):
  1. <div id="presentation_container" class="pc_container">
  2.             <div class="pc_item">
  3.                 <div class="desc">
  4.                     <h1>Server Park</h1>
  5.                     Consectetur adipiscing elit. Nunc quis tellus eros.
  6.                     Nam blandit diam id turpis bibendum nec rutrum dui pulvinar. Quisque fermentum,
  7.                     dolor ut adipiscing suscipit, leo lorem malesuada mauris, vitae dapibus mi
  8.                     ligula ut nunc.
  9.                 </div>
  10.                 <img src="images/slide1.jpg" alt="slide1" />
  11.             </div>
  12.             <div class="pc_item">
  13.                 <div class="desc">
  14.                     <h1>iPhone Apps</h1>
  15.                     Consectetur adipiscing elit. Nunc quis tellus eros.
  16.                     Nam blandit diam id turpis bibendum nec rutrum dui pulvinar. Quisque fermentum,
  17.                     dolor ut adipiscing suscipit, leo lorem malesuada mauris, vitae dapibus mi
  18.                     ligula ut nunc.
  19.                 </div>
  20.                 <img src="images/slide2.jpg" alt="slide2" />
  21.             </div>
  22.  
  23.             <!-- Introducimos más elementos si queremos, Aqui hay dos. -->
  24.  
  25.         </div>

Como vemos todo está contenido por <div id="presentation_container" class="pc_container"> y luego cada elemento es un <div class="desc"> con un div para la descripción que contiene el titulo en un h1 y la descripción en sí. Además hay una imagen que será el fondo.

Ahora solo nos falta añadir lo siguiente justo después del presentation_container y listo.

[COPIAR]
Código PHP (Copiar):
  1. <script type="text/javascript">
  2.             presentationCycle.init();
  3.         </script>

Si hemos subido todos los archivos y los hemos añadido en el header de forma correcta ya debería de funcionar.

Para más información consultar la página del autor donde explica (en ingles) como utilizar el script y además como personalizarlo.