var ImageTransitioner = Class.create(); //Define our ImageTransitioner class :)
ImageTransitioner.prototype = { //using .prototype we are able to add members to our prototype object(class in java)
initialize:function(containers, delayTime){ // initialize as in java is the constructor
this.id_containers=containers; this.actual=0;
this.interval = setInterval(this.imageTransition.bind(this),delayTime);
//bind it is used to maintain the context, to our object context, so we will able to use this.whatever
},imageTransition:function(){
Effect.Fade(this.id_containers[this.actual], { duration:2, from:1.0, to:0.0 });
this.actual++;
if (this.actual >= this.id_containers.lenght) this.actual = 0;
Effect.Appear(this.id_containers[this.actual], { duration:2, from:0.0, to:1.0 });
}
};
//The combination effects Fade and appear gives you a simple but pretty effect when you use for a collection of images that changes in some sections.
var imageEffect = new ImageTransitioner(new Array('box-1', 'box-2', 'box-3', 'box-4'),8000);
And the Html looks like:

What i don't like, is that we use the inline style: 'display:none' so if you have any comments or questions, please let me know.



