Javascript - Image Banner Rotation Ad.
1 post
Page 1 of 1
Quick Profile
Information
Posts: 953
Joined: Thu Jan 14, 2010 5:48 am View Full Profile
ok, this is a very simple "PURE" Javascript banner rotation script.
You can use jQuery to add effects for then the client will have one more file to download and this can also slow down the website. I hate slow websites. Plus you never know what someone has done to the jQuery.js file. If you want to know, open and read the jQuery.js file you download when you visit Facebook.
ok to start off this is a the whole script.
You will need image stored on a server.
just simply add this code to the <HEAD> section of the page you want the banners to be displayed on.
You will also need to add a <DIV> element to your page with the ID of "banner", apply any css that you want.
for the most part, the css should contain the size (width,height) or the banner images.
the second part of the script loads all your banner images into an array()
back to the first function
So,
will execute. and the <DIV> with the ID of banner, will be updated with the banner.
How to use this script on a page.
So to recap.
Add the script to the <HEAD> secion of the page.
Add the following.
You can use jQuery to add effects for then the client will have one more file to download and this can also slow down the website. I hate slow websites. Plus you never know what someone has done to the jQuery.js file. If you want to know, open and read the jQuery.js file you download when you visit Facebook.
ok to start off this is a the whole script.
You will need image stored on a server.
just simply add this code to the <HEAD> section of the page you want the banners to be displayed on.
You will also need to add a <DIV> element to your page with the ID of "banner", apply any css that you want.
for the most part, the css should contain the size (width,height) or the banner images.
Code: Select all
<style type="text/css">
div.banner{width:600px;height:100px;)
</style>
Code: Select all
<div id="banner"></div>Code: Select all
the first bit of code is the setup function.
<script type="text/javascript">
function myFunction()
{
var newbg = 'url(images/banners/600x100/red.png)';
document.getElementById('banner').style.backgroundImage = newbg;
setInterval("myTimer()",5000);
return false;
}
function myTimer()
{
var randomImage = [
'images/banners/600x100/red.png',
'images/banners/600x100/blue.png',
'images/banners/600x100/green.png',
'images/banners/600x100/purple.png']
var r = Math.floor((Math.random()*randomImage .length));
var newImage = "url(" + randomImage [r] + ")";
document.getElementById('banner').style.backgroundImage = newImage;
}
</script>
Code: Select all
all this section does is load a default banner to start with. function myFunction()
{
var newbg = 'url(images/banners/600x100/red.png)';
document.getElementById('banner').style.backgroundImage = newbg;
setInterval("myTimer()",5000);
return false;
}
the second part of the script loads all your banner images into an array()
Code: Select all
and uses the Random() object to pick what banner to load and display. function myTimer()
{
var randomImage = [
'images/banners/600x100/red.png',
'images/banners/600x100/blue.png',
'images/banners/600x100/green.png',
'images/banners/600x100/purple.png']
var r = Math.floor((Math.random()*randomImage .length));
var newImage = "url(" + randomImage [r] + ")";
document.getElementById('banner').style.backgroundImage = newImage;
}
back to the first function
Code: Select all
this function also sets up the Interval() at which the banners will change. function myFunction()
{
var newbg = 'url(images/banners/600x100/red.png)';
document.getElementById('banner').style.backgroundImage = newbg;
setInterval("myTimer()",5000);
return false;
}
So,
Code: Select all
means that every 5 seconds or 5000 milliseconds, the function "MyTimer()"setInterval("MyTImer()",5000);will execute. and the <DIV> with the ID of banner, will be updated with the banner.
How to use this script on a page.
So to recap.
Add the script to the <HEAD> secion of the page.
Code: Select all
Add a <DIV> with the ID of "banner" under the <BODY> tag of the page.
<script type="text/javascript">
function myFunction()
{
var newbg = 'url(images/banners/600x100/red.png)';
document.getElementById('banner').style.backgroundImage = newbg;
setInterval("myTimer()",5000);
return false;
}
function myTimer()
{
var randomImage = [
'images/banners/600x100/red.png',
'images/banners/600x100/blue.png',
'images/banners/600x100/green.png',
'images/banners/600x100/purple.png']
var r = Math.floor((Math.random()*randomImage .length));
var newImage = "url(" + randomImage [r] + ")";
document.getElementById('banner').style.backgroundImage = newImage;
}
</script>
Code: Select all
To load the Banner Rotation script edit the <BODY> tag of the page.<style type="text/css">
div.banner{width:600px;height:100px;)
</style>
<div id="banner"></div>
Add the following.
Code: Select all
if you already have a function being loaded then just add the function()
<body onload="myFunction()">Code: Select all
<body onload="myOtherFunction(); myFunction();">
1 post
Page 1 of 1
Copyright Information
Copyright © Codenstuff.com 2020 - 2023