JAVASCRIPT RANDOM BANNER GENERATOR
The following tutorial and sample script shows you how to create a random banner generator that rotates banners on your site. You can also use this system to rotate other images, text or links. Each time the page is loaded, a random banner is displayed. Refresh the page a few times to see the banners change at random. See the demo below:
Our first step is to create a function named randomBanners (you can name this as you please) and place an opening { after it as follows:
<script type="text/javascript">
function randomBanners()
{
We then create a new array and call it allBanners as follows:
var allBanners=new Array();
We then feed each element of the array with banners, images, text or links. This can be as many as you like - simply name the elements in the array correctly:
allBanners[0]="<img src='banner1.jpg' />";
allBanners[1]="<img src='banner2.jpg' />";
allBanners[2]="<img src='banner3.jpg' />";
allBanners[3]="<img src='banner4.jpg' />";
We then count the number of elements of the array by using the length method and assign variable l to it:
var l =allBanners.length;
We then create a random number between 0 to 1 using the math random method and assign variable r to it:
var r=Math.random();
We the create variable t and assign to it the product of variables l and r.
var t=l * r;
We then round down t to the lower full number using the floor method and assign that to variable i:
var i = Math.floor(t);
We then use getElementById() to reference a div which we will place in the body and will give it the value of the banner picked at random:
document.getElementById('test').innerHTML = allBanners[i];
We then close the function:
}
</script>
We then place a div anywhere between the <body> and </body> tags and call it test. The name of the div must correspond with the name of the div in getElementById() in the script above.
<div name="test"></div>
We then call the function from the body tag as follows:
<body onload="randomBanners();">
The complete function script which must appear between the <head> and </head> tags is:
<script type="text/javascript">
function randomBanners()
{
var allBanners=new Array();
allBanners[0]="<img src='banner1.jpg' />";
allBanners[1]="<img src='banner2.jpg' />";
allBanners[2]="<img src='banner3.jpg' />";
allBanners[3]="<img src='banner4.jpg' />";
var l =allBanners.length;
var r=Math.random();
var t=l * r;
var i = Math.floor(t);
document.getElementById('test').innerHTML = allBanners[i];
}
</script>
| 
Home
Computers & Internet
