Banner Rotater

JavaScriptSource Staff Dec 5, 2008

General

Use this script to rotate your banner ads. Just set the images, URLs and the delay time. Timers can be set at different intervals. Very easy to implement.

Notes

Created by: Scragar

Source Code

Paste this source code into the designated areas.

External file

Paste this code into an external JavaScript file named: bannerRotator.js

/* This script and many more are available free online at
The JavaScript Source!! http://www.javascriptsource.com
Created by: Scragar | Licensed under: Public Domain
 */

function BannerRotator(){
// first, defaults:
  this.timer = 2;
  this.bannerNum = 0;// -1 = random
// then normal init work
  this.banners = [];
  this.binding = null;
  this.timeout = null;

  this.add = function(){// add a banner to the array
    this.banners[this.banners.length] = [arguments[0], arguments[1]];
  }

  this.bind = function(){// bind to an element
    if(typeof arguments[0] == 'string')
      this.binding = document.getElementById(arguments[0]);
    else
      this.binding = arguments[0];
    this.rotate();
  }

  this.rotate = function(){// the actual image rotator
    if( ! this.empty())
      return;
    var showNum, tmpA = document.createElement('a'), tmpImg = document.createElement('img');

    if(this.bannerNum < 0)// random
      showNum = Math.floor(Math.random()*this.banners.length);
    else// syncronous
      showNum = this.bannerNum=(++this.bannerNum >= this.banners.length)?0:this.bannerNum;

    tmpA.href = this.banners[showNum][0];
    tmpImg.src = this.banners[showNum][1];
    tmpA.appendChild(tmpImg);
    this.binding.appendChild(tmpA);
  }

  this.empty = function(){// empty the element if possible
    if(this.binding == null)
      return false;
    while(this.binding.hasChildNodes())
      this.binding.removeChild(this.binding.firstChild);
    return true;
  }

  this.startTimer = function(){// start the loop, normaly done during page load.
    this.stopTimer();
    this.timeout = window.setInterval(
      (function(x){
        return function(){
          x.rotate();
        }
      })(this), this.timer*1000);
  }

  this.stopTimer = function(){// stop the loop, nice to make available via a button.
    if(this.timeout != null)
      window.clearInterval(this.timeout);
    this.timeout = null;
  }
}

CSS

Paste this code into your external CSS file or in the <style> section within the HEAD section of your HTML document.

img {
  border: none;
}

#banner1 {
  margin-left: 15%;
}

#banner2 {
  margin-left: 15%;
}

Head

Paste this code into the HEAD section of your HTML document.


<script type="text/javascript" src="bannerRotator.js"></script>

function addLoadEvent(func) {
  var oldonload = window.onload;
  if (typeof window.onload != 'function') {
    window.onload = func;
  } else {
    window.onload = function() {
      if (oldonload) {
        oldonload();
      }
      func();
    }
  }
}

// Banner 1

var myBanner1 = new BannerRotator();

myBanner1.add('http://www.apache.org/', 'apache.gif');
myBanner1.add('http://www.javascriptsource.com/', 'jss.gif');
myBanner1.add('http://www.webreference.com/', 'http://www.webreference.com/art/site-name.gif');

myBanner1.timer = 5;// 5 secs between images

// Banner 2

var myBanner2 = new BannerRotator();

myBanner2.add('http://www.phpbuilder.com/', 'phpbuilder.gif');
myBanner2.add('http://www.4guysfromrolla.com/', 'http://www.4guysfromrolla.com/img/4guyslogo.gif');
myBanner2.add('http://www.codeguru.com/', 'http://www.codeguru.com/img/logo.gif');

myBanner2.timer = 6;// 6 secs between images
myBanner2.bannerNum = -1;// randomise banner

// Set-up display

addLoadEvent(function(){
  myBanner1.bind('banner1');// match to ID of element.
  myBanner1.startTimer();

  myBanner2.bind('banner2');// match to ID of element.
  myBanner2.startTimer();
});

Body

Paste this code into the BODY section of your HTML document


<div id="banner1"></div>
<br>
<div id="banner2"></div>

Leave a Response

(2 comments)

That is generally controlled by the user's browser.

Lee Jan 16, 2009

Tried everything I know to have links open in new window.[br /][br /]I give up.[br /][br /]What's the snippet code and where does it go?[br /][br /]Thanks.

M. R. Lawrence Dec 5, 2008

Alphabetical Listing

Tutorials

Ajax Tutorials

Ajax

Buttons

Cookies

CSS

Forms

Games

Generators

Image Effects

Math Related

Miscellaneous

Multimedia

Navigation

Page Details

Password

Snippets

Text Effects

Time & Date

User Details