Script para rotar contenido de forma atrayente

Si queremos destacar algo en nuestra web o blog -ya sean artículos, publicidades, o cualquier tipo de contenido- la librería Javascript Crossfader.js nos puede llegar a ayudar mucho en esta tarea.
¿En qué consiste? Nos permite mostrar de forma dinámica contenido que irá rotando cada cierta cantidad de segundos.

Lo bueno de esta herramienta es que nos permite agregar cualquier tipo de información, ya que lo que va rotando son divs definidos por nosotros mismos como deseemos.
De esta forma podremos usar, por ejemplo, imágenes, texto o cualquier cosa que se pueda incluir en la web. Incluso podremos mezclar todas estas cosas.

Para instalarla no hace falta más que descargar el script (pueden hacerlo desde aquí) y copiar el siguiente código dentro de nuestra etiqueta head:

JavaScript:
<script type="text/javascript" src="js/bsn.Crossfader.js"></script>
Nuestro CSS debería lucir así:
<style type=”text/css”>
div.cf_wrapper
{
position: relative;
}
div.cf_element
{
width: 400px;
height: 250px;
background-color: #eee;
border: 1px solid #ccc;
}
div.cf_element div.content
{
padding: 10px;
}
div.cf_element div.content h3
{
padding-top: 0;
margin-top: 0;
}
</style>

Luego de esto hay que definir el código HTML de la siguiente manera:

<div class="cf_wrapper">

<div class="cf_element" id="cf1">
<div class=”content”>
<h3>Titulo 1</h3>
<p> aquí todo nuestro contenido correspondiente al bloque 1 </p>
</div>
</div>

<div class="cf_element" id="cf2">
<div class=”content”>
<h3> Titulo 2</h3>
<p> Aquí todo nuestro contenido correspondiente al bloque 2 </p>
</div>
</div>

</div>

¿Qué es esto? Sencillamente cada bloque de clase cf_element representará uno de las pantallas que aparecerán. Si deseáramos más de dos pantallas tan sólo deberíamos copiar y pegar todo cf2 y cambiarle el id por cf3 o lo que queramos.

Por último debemos agregar la siguiente línea de código Javascript:

<script type="text/javascript">
var cf = new Crossfader( new Array(’cf1′,’cf2′), 500, 2000 );
</script>

Con esta línea inicializamos el script. Donde dice new Array(’cf1′,’cf2′) debemos agregar todos los divs que usemos. Si por ejemplo hubiéramos hecho 3 y le hubiéramos puesto de id cf3 quedaría new Array(’cf1′,’cf2′,’cf3′).

Espero que lo pongan en práctica porque es una forma simple pero eficaz de crear un cuadro de contenidos que llame la atención en nuestra web.

Fuente: Xyberneticos