Advanced Search

Mootools: Simple Element Rotator

/ Published in: JavaScript
Save to your folder(s)
usage:
new Fader({
delay: 1000,
elements: $$('h3.blurb')
});

Expand | Embed | Plain Text

Copy this code and paste it in your HTML 
  1. var Fader = new Class({
  2.  
  3. 	item: 0,
  4. 	delay: 1000,
  5. 	elements: null,
  6. 	interactive: false,
  7.  
  8. 	initialize: function(opts) {
  9. 		for(var key in opts) {
  10. 			this[key] = opts[key];
  11. 		}
  12.  
  13. 		this.elements.each(this.setDefault.bind(this));
  14.  
  15. 		if(this.interactive) {
  16. 			this.elements.each(this.makeInteractive.bind(this));
  17. 		}
  18.  
  19. 		this.fadeIn();
  20.  
  21. 		setInterval(this.swap.bind(this), this.delay);
  22. 	},
  23.  
  24. 	fadeOut: function() {
  25. 		this.elements[this.item].fade('out');
  26. 	},
  27.  
  28. 	fadeIn: function() {
  29. 		this.elements[this.item].fade('in');
  30. 	},
  31.  
  32. 	swap: function () {
  33. 		this.fadeOut();
  34. 		this.item = this.item + 1 >= this.elements.length ? 0 : this.item + 1;
  35. 		this.fadeIn();
  36. 	},
  37.  
  38. 	setDefault: function(el) {
  39. 		el.set(this.tweenable, this.min);		
  40. 	},
  41.  
  42. 	makeInteractive: function(el) {
  43. 		el.addEvent('click', this.swap.bind(this));		
  44. 	}
  45. });

Report this snippet


Comments

RSS Icon Subscribe to comments

You need to login to post a comment.