Data Slider //JavaScript Class
[UPDATED CODE AND HELP CAN BE FOUND HERE]
//+ Jonas Raoni Soares Silva //@ http://jsfromhell.com/classes/data-slider [v1.0] ( 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 ); } };
Example
<form action=""> <fieldset> <legend>Rotacionador de objetos</legend> <div id="dados">:]</div> <input type="button" name="stop" onclick="" 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" src="event.js"></script> <script type="text/javascript"> //<![CDATA[ addEventListener = function( o, e, h ){ var x='addEventListener'; o[x] ? o[x]( e, h, false ) : o[x='attachEvent'] ? o[x]( 'on' + e, h ) : o[ 'on' + e ] = h; } var x = new DataSlider( function( data ){ var x = document.getElementById( "dados" ); x.innerHTML = '<a href="' + data[1] + '">'+ data[0] +"</a>"; }, 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 addEventListener( f.play, "click", function(){ x.play(); }); addEventListener( f.stop, "click", function(){ x.stop(); }); addEventListener( f.next, "click", function(){ x.stop(); x.next(); }); addEventListener( f.previous, "click", function(){ x.stop(); x.previous(); }); //]]> </script>