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 -

These are real banners rotating using this script. You can click on 1 2 3 buttons to see a particular banner or play / pause the rotation. Banners sequence will change randomly everytime you refresh the page

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 -

duration - sets the total duration of transitioning per image
seconds_per_slide - sets the time per image/div is shown
pause_on_mouseover - whether the rotation will be paused when mouse over happens
onChange: function() {} - You can define here, any javascript code that you want to run when the image changes

Following functions are used to control the behavior of the slide show -

forward()
backward()
jumpToSlide()
start()
pausePlay()
stop()
rndm()
transition()

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.