@alterebro

Rotador de Elementos con JQuery.

lunes, octubre 18, 2010 @20:14

Función para rotar la visualización de elementos HTML usando JQuery. Los parámetros necesarios serán: items que contendrá un array con los elementos JQuery a los que se le aplicará la rotación y los opcionales delay y interval para configurar la duración en milisegundos en caso que queramos un retardo al aplicar la rotación y la duración que cada elemento permanece visible antes de rotar al siguiente (por defecto 5 segundos, 5000 milisegundos).

<!-- HTML -->
<div id="rotate-me">
<ul>
<li>...</li>
<li>...</li>
<!-- ... -->
</ul>
</div>

Teniendo la siguiente estructura en el documento HTML, si queremos hacer la rotación de cada elemento de la lista que se encuentra en el interior del div con id="rotate-me" se le pasaría el selector de los elementos correspondiente item_rotator('div#rotate-me ol li');. Tal como se muestra aquí abajo:

<script type="text/javascript" src="http://www.google.com/jsapi"></script>
<script>
/* <![CDATA[ */
function item_rotator(items,delay,interval) {
if (!delay) { delay = 0; }
if (!interval) { interval = 5000; }
this.interval_msec = interval;
this.items = items;
this.current = 0;
this.length = $(this.items).length;
if (this.length > 1) {
$(this.items).css('display','none');
$(this.items+':first').css('display','block');
var self = this;
window.setTimeout(function(){ self.init(); }, delay);
}
}
item_rotator.prototype.rotate_end = function() {
this.current++;
if (this.current >= this.length) {this.current = 0;}
$(this.items+':eq('+this.current+')').slideDown(200);
};
item_rotator.prototype.rotate = function() {
var self = this;
$(this.items+':eq('+this.current+')').slideUp(200, function(){ self.rotate_end(); });
};
item_rotator.prototype.init = function() {
var self = this;
setInterval(function(){self.rotate();},this.interval_msec);
};

google.load("jquery", "1.4.2");
google.setOnLoadCallback(function() {
$(function() {
var rotator = new item_rotator('div#rotate-me ol li');
});
});
/* ]]> */
</script>

Etiquetas: ,

0 comentarios

Publicar un comentario en la entrada

Suscribirse a Enviar comentarios [Atom]

Enlaces a esta entrada:

Crear un enlace