Rotacionador De Dados //Repositório JavaScript

Descrição

Auto rotaciona entre objetos.
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: 21)

2.29