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: javascript, jquery
0 comentarios
Publicar un comentario