Banners rotator

Banners rotator

You can easily make a banner rotator (randomizer) in JavaScript. Here is how:

The HTML

Step #1: create a basic HTML5 document:

Step #2: Right after the title tag, attach a stylesheet, the jQuery library and an external JavaScript:

Step #3: create the banner container:

The CSS

Step #4: set the width of the banner container and center it horizontally:

The JavaScript

Step #5: create the empty SetBanners() function and call it when the document is ready

The next steps will represent the actual code of the SetBanners() function

Step #6: generate a random integer, between 0 and 2

Step #7: create an empty array

Step #8: populate the previously created array (“banners”) with linked images

Step #8: randomly call an element of the “banners” array

Step #9: put the randomly called array element into the banners div

The entire function put together:

See the demo HERE. Refresh the page to see the effect.

Leave a Reply

Your email address will not be published. Required fields are marked *