Building a Javascript Ad Rotator / Slideshow (with 123 buttons, play, pause and stop options)

This script work in all major browsers - IE6, IE7, Firefox 3.0. You can even rotate images and flash objects as everything within DIV’s will be rotating.

Example of Banner Rotation using this script -

The idea is to pick up all the DIV’s within the main DIV container and rotate them randomly.

Here is an example of the Ad Rotator / Slideshow with some CSS thrown in and play/pause, 123 buttons. Please feel free to use the CSS and code. Leaving the reference back to my site (http://www.coolwebdeveloper.com) in the comments will be much appreciated though.

We will be using a set of open source scripts in addition to my own code to build this javascript adrotator/slideshow.

Please scroll to the bottom of the article to download the zipped files package that we are going to use for this project.

You will find a number of methods inside slideshow.js to control the slideshow. At the top level is a javascript class used to initiate the slideshow object from the HTML file.

Some of the options that can be set are -

Class can be initiated by using following code - You can pass any available number of property values when defining the rotation class

var slideshow = new MDSK.Slideshow(”slideMainDiv”, “.slideDiv”, {
seconds_per_slide: 5.0
});

The random() function is used to change the rotation pattern every tine the page is refreshed, as a result the images contained within the object are displayed randomly.

/**********************************/

rndm : function(min, max){
return Math.floor(Math.random() * (max - min + 1) + min);
},

/**********************************/

and then we will call this function every time the class object is instantiated

/**********************************/

this.slides.sort(function(a,b){
return me.rndm(-1,1);
});

/**********************************/

Please fill in the following information to receive the Javascript Adrotator code with fully working example via email and to subscribe to FREE Newsletter and email feed.
Your email address will also be used to provide any important updates and new versions for Adrotator script in near future.

All the scripts are pretty self explanatory but if you have any questions please dont hesitate to contact me by leaving a message in the comments section.

There is a lot of room for improvement in this code and lot of inline CSS can be moved to CSS file. Also, I am working on a wordpress adrotator plugin (enhancing this code) and will be releasing soon. So keep checking this site.

Related posts brought to you by Yet Another Related Posts Plugin.