Noob Flash

I created this JavaScript image rotator to solve a problem a client of mine was having on their site last week.

The first step is to create an empty div that the images can be loaded into. The easiest way to access a specific div from JavaScript is to make sure the div has an id, and access the div by referencing the div id as such:

var bannerHolder = document.getElementById('bannerHolder');

Once you have created the div and have a way to reference it via JavaScript, you will need to create an array of image urls to loop through.

var bannerArray = new Array();
var currentImage = 0;
bannerArray = ['http://www.noobflash.com/wp-content/themes/LemonPress/images/JavaScriptImageRotator/google.jpg','http://www.noobflash.com/wp-content/themes/LemonPress/images/JavaScriptImageRotator/yahoo.jpg','http://www.noobflash.com/wp-content/themes/LemonPress/images/JavaScriptImageRotator/msn.jpg'];

Tie these pieces of code together using setInterval to create the timed rotation and you have your image rotator. Get the complete code using the link below:

Get Complete Code

One Response to “JavaScript Image Rotator”