Advanced Search

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.

Expand | Embed | Plain Text

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.