Mootools news rotate


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

http://mcarthurgfx.com/blog/javascript/rotater-class/

This does required the Fx.Elements add-on on top of the regular Mootools framework, so be sure to grab the extra classes from Mootools More.


Copy this code and paste it in your HTML
  1. window.addEvent('domready',fuction(){
  2. var rotater = new Rotater('.slide',{ //Class of elements that should rotate.
  3. slideInterval:4000, //Length of showing each element, in milliseconds
  4. transitionDuration:1000, //Length crossfading transition, in milliseconds
  5. });
  6. });
  7.  
  8.  
  9.  
  10. var Rotater=new Class({Implements:[Options,Events],options:{slideInterval:4000,transitionDuration:1000,startIndex:0,autoplay:true},initialize:function(B,A){this.setOptions(A);this.slides=$$(B);this.createFx();this.showSlide(this.options.startIndex);if(this.slides.length<2){this.options.autoplay=false}if(this.options.autoplay){this.autoplay()}return this},toElement:function(){return this.container},createFx:function(){if(!this.slideFx){this.slideFx=new Fx.Elements(this.slides,{duration:this.options.transitionDuration})}this.slides.each(function(A){A.setStyle("opacity",0)})},showSlide:function(B){var A={};this.slides.each(function(C,D){if(D==B&&D!=this.currentSlide){A[D.toString()]={opacity:1}}else{A[D.toString()]={opacity:0,}}},this);this.fireEvent("onShowSlide",B);this.currentSlide=B;this.slideFx.start(A);return this},autoplay:function(){this.slideshowInt=this.rotate.periodical(this.options.slideInterval,this);this.fireEvent("onAutoPlay");return this},stop:function(){$clear(this.slideshowInt);this.fireEvent("onStop");return this},rotate:function(){current=this.currentSlide;next=(current+1>=this.slides.length)?0:current+1;this.showSlide(next);this.fireEvent("onRotate",next);return this}});

Report this snippet


Comments

RSS Icon Subscribe to comments

You need to login to post a comment.