Rotacionador De Dados //Repositório JavaScript
Descrição
Auto rotaciona entre objetos.
Criado: 2005.08.08
Criado: 2005.08.08
Código (Download)
//+ Jonas Raoni Soares Silva
//@ http://jsfromhell.com/classes/data-slider [rev. #1]
(DataSlider = function(onchange, interval, args){
var i = DataSlider.instances = DataSlider.instances || [], o = this;
(o.c = 0, o.timer = null, o.interval = (o.onchange = (o.data = [].slice.call(
arguments, 0)).shift(), o.data.shift()), i[o.index = i.length] = o);
}).prototype = {
stop: function(){
clearTimeout(this.timer);
},
play: function(){
this.timer = setInterval("DataSlider.instances[" + this.index + "].next()", this.interval);
},
show: function(x){
this.c = x; this.onchange(this.data[ x ]);
},
previous: function(){
this.show(this.c > 0 ? --this.c : this.data.length-1);
},
next: function(){
this.show((this.c + 1) % this.data.length);
}
};
Exemplo (Exemplo)
<form action="">
<fieldset>
<legend>Rotacionador de objetos</legend>
<div id="dados">:]</div>
<input type="button" name="stop" value="parar" />
<input type="button" name="previous" value="anterior" />
<input type="button" name="next" value="pr?ximo" />
<input type="button" name="play" value="play" />
</fieldset>
</form>
<script type="text/javascript">
//<![CDATA[
function handler(data){
var x = document.getElementById("dados");
x.innerHTML = '<a href="' + data[1] + '">'+ data[0] +"</a>";
}
var x = new DataSlider(handler, 1000, ["ABCDE", "http://www.abcde.com"], ["FGHIJ", "http://www.fghij.com.br"], ["KLMNO", "http://www.klmno.com"]);
x.play();
var f = document.forms[0];
//http://www.jsfromhell.com/geral/event-listener
addEvent(f.play, "click", function(){x.play();});
addEvent(f.stop, "click", function(){x.stop();});
addEvent(f.next, "click", function(){x.stop(); x.next();});
addEvent(f.previous, "click", function(){x.stop(); x.previous();});
//]]>
</script>
Ajuda
Construtor
- DataSlider(onchange: Function(data: Object): void, interval: Integer, arg0..argN: Object)
-
Gera uma instância de DataSlider.
- onchange
- função que será chamada a cada vez que a classe mudar o item atual
- interval
- intervalo de tempo em milisegundos em que os items serão rotacionados
- arg0..argN
- objetos que serão adicionados ao container do slider
Propriedades
- DataSlider.onchange: function(data: Object): void
- função que será chamada a cada vez que a classe mudar o item atual
- DataSlider.interval: Integer
- intervalo de tempo em milisegundos em que os items serão rotacionados
Métodos
- DataSlider.stop(void): void
- Interrompe o sliding automático.
- DataSlider.play(void): void
- Inicia o sliding automático.
- DataSlider.show(index: Integer): void
-
Seleciona um objeto e chama o evento onchange passando ele como evento.
- index
- índice do objeto a ser selecionado
- DataSlider.previous(void): void
- Vai para o próximo objeto.
- DataSlider.next(void): void
- Volta para o objeto anterior.
Ranque (Votos: 22)
2.18