A simple slide show

slideshow.js

/*
  Author: Qawelesizwe Mlilo
  Email: [email protected]
  Dependency: Mootools
  Notes: This code was used in a Joomla! project and can be easily modified to run without a library
*/

var slideShow = function (img, o) {
    this.element = $(img);
    
    this.images = o.images;
	
    this.speed = o.speed;
    
    this.repeats = o.repeats;
    
    this.start = function () {
        //local variables
        var main = this.element, imgs = this.images, i, c = 0, r = 0, imageFolder = [], 
        interval_id, imgObj = new Image(), repeates = this.repeates speed = this.speed; 
 
        //preload first image
        imageFolder[c] = imgObj;
        imageFolder[c].src = imgs[c];
		
        main.addEvent('mouseover', function() {
            clearInterval(interval_id) 
        });
        main.addEvent('mouseout', function() {
            interval_id = window.setInterval(change, speed);
        });
      
        function change () {

            if (c < imgs.length) {
			
                //check if next image is preloading
		if (!(imageFolder[c + 1]) && (c + 1) < imgs.length)  {
		    imageFolder[c + 1] = imgObj;
		        imageFolder[c + 1].src = imgs[c + 1]; // preload next image
		    }
                // if this image has not completed preloading
                if (!imageFolder[c].complete) {
                    imageFolder[c].addEvent('load', function () { 
                        main.src = imgs[c]; // only change the slide once it has been loaded
                    });
                }
                else { //image is loaded				
                    main.src = imgs[c]; // change current image
                }
	            c++;  // next image please
            }
			// check if slide should repeat
            else if (repeates > 0 &&  r < repeates) { //end of slide
                c = 0; // reset slide
                change(); // start again;
                r++;
            }
        }	
        interval_id = window.setInterval(change, speed);
    };
};

// how it is used

var myPresentation = new slideShow("image_id", {

    images: ['img_one_url.jpg','img_two_url.jpg','img_three_url.jpg'], // slide images
   
    speed: 4000,  // slide time interval  

    repeats: 1  // repeats slide once  	
});

myPresentation.start();