Mootools: Simple Element Rotator


/ Published in: JavaScript
Save to your folder(s)

usage:
new Fader({
delay: 1000,
elements: $$('h3.blurb')
});


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.