Slideshow Banner Ads - JavaScript Code

This script randomly starts the banner rotation. The first banner is loaded and is immediately changed once the page loads. Each one image will have its own link. To not have the first banner load all the time, you can create a transparent image the same size as the other banners and put it in the IMG tag.

In addition to display advertising banners, it also can be used to slideshow your favorite photos and images.

Script Demo:

Demo

JavaScript Code:

Insert this code into <head> tags

<script language="JavaScript">
<!-- Hide from old browsers
// Copyright &copy; 1999 Doug Popeney
// Created by Doug Popeney (easyjava@easyjavascipt.com)

i = 3 // Number of banners that you have
banner1 = new Image();
banner1.src = "imageA.gif";
banner2 = new Image();
banner2.src = "imageB.gif";
banner3 = new Image();
banner3.src = "imageC.gif";


links = new Array
links[1] = "urlA.html"
links[2] = "urlB.html"
links[3] = "urlC.html"

description = new Array
description[1] = "This is your description takes you to urlA"
description[2] = "This is your description takes you to urlB"
description[3] = "This is your description takes you to urlC"

function randombanner(){
    var randomnumber = Math.random();
    i = Math.round( (i - 1) * randomnumber) + 1;
    document.banner.src = eval("banner" + i + ".src");
}

function startTime(){

        var time= new Date();
        hours= time.getHours();
        mins= time.getMinutes();
        secs= time.getSeconds();
        closeTime=hours*3600+mins*60+secs;
        closeTime+=5;
        Timer();

}

function Timer(){
        var time= new Date();
        hours= time.getHours();
        mins= time.getMinutes();
        secs= time.getSeconds();
        curTime=hours*3600+mins*60+secs
        if (curTime>=closeTime){
                if (i < 3){
                        i++;
                        document.banner.src = eval("banner" + i + ".src");
                }
                else{
                        i = 1;
                        document.banner.src = eval("banner" + i + ".src");
                }
                startTime();
        }
        else{
                window.setTimeout("Timer()",1000)}

}

function clickLink(){
        top.location = links[i]
}

function descript(){
        window.status = description[i]
}

// -->

</script>

Insert this code into <body> tags

<center><a href="" onClick="clickLink(); return false;" onMouseOver="descript(); return true;" onMouseOut="window.status=''"><img src="banner.gif" border=0 name="banner"></a></center>

Instruction:

Code in <head></head>:

Change the image A,B,C to your banner ads image address.
Change the description 1,2,3 to the text will be show on the link.
Change the urlA,B,C to target URL.

Code in <body></body>:

Replace tags <body> with <body onLoad="randombanner();startTime();">
Change banner.gif to your first banner to display.
Insert other code into the webpage where you want to slideshow your banner.

Webmaster » Web Programming » JavaScript » Banner » Slideshow Ads

Related Links:

Home | Sitemap | Bookmark This Page

Sponsored Links

Recommended Links