DZone Snippets is a public source code repository. Easily build up your personal collection of code snippets, categorize them with tags / keywords, and share them with the world

Snippets has posted 5883 posts at DZone. View Full User Profile

Data Slider //JavaScript Class

09.09.2005
| 4092 views |
  • submit to reddit
        <a href="http://jsfromhell.com/classes/data-slider">

[UPDATED CODE AND HELP CAN BE FOUND HERE]
</a>

//+ 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>