JavaScript Ad Rotator

2011-01-25

I discovered recently that this site has been up and active for over a year now with no major changes. However, I have looked over my code and found that there are certain things that should be fixed and expanded. Among other things, the search engine is currently very simple since it only can search on a word or text string in the database. The changes is nothing that will affect the functionality of the page. But enough about the boring part for now is the time to share with you another piece of code that I dug up in my archives.

This code example shows a simple ad rotator written in Javascript. The script shows a link with a clickable image, which, after a few seconds is replaced with the next link with picture. It is a feature that has been around for a while on web but it is easy to modify to create other effects on your website. As it is written in Javascript, no code needs to run on a Web server, but everything is executed by the user’s browser. First, the Javascript code is presented whereupon the HTML code is displayed.

<script type="text/javascript">
//This code can be run both in the head and body.

//Global variable that stores advertising banners.
var ads = new Array();

//Function that starts when the page finished loading.
window.onload = function(){
  //Adds information about the new banners.
  ads.push(["http://w3schools.com/css/default.asp", "valid-css.png", "CSS"]);
  ads.push(["http://w3schools.com/xhtml/default.asp", "valid-xhtml.png", "XHTML"]);
  ads.push(["http://w3schools.com/svg/default.asp", "valid-svg.png", "SVG"]);

  //Starting rotation with the first banner.
  ad_rotate(0);
}

function ad_rotate(active){
  //Gets the div that will display banners.
  var ad_element = document.getElementById("ad");

  //Prints a new link with image in advertising box.
  ad_element.innerHTML = "<a href=\""+ads[active][0]+"\"><img src=\""+ads[active][1]+"\" alt=\""+ads[active][2]+"\" title=\""+ads[active][2]+"\" /></a>";

  //Switches to the next banner.
  active++;

  //If the counter has reached the end, it shall start again from zero.
  if(active >= ads.length){
    active = 0;
  }

  //Run the function in 5000 milliseconds (5 seconds).
  setTimeout("ad_rotate("+active+")", 5000);
}
</script>

Here is the HTML code used to place the advertising banner in any location on your website.

<!-- This code is placed where the advertising banner will be -->
<div id="ad"> </div>
  • Joe

    I think I get it. My question is, because this code is for one location on a website and I need at least 2 or not 3 DIFFERENT places to implement this feature with different ad rotations in each location… how would I do that?

    Thanks

    Joe

  • Teresa

    Thanks so much for posting this! It’s exactly what I was looking for – straightforward banner ad rotation with links, easily modified, not interfering with other scripts on the pages – and scales nicely in a responsive design, unlike fancier scripts that use the images as backgrounds.
    (for my project I added a 4th field to the array, to set the target for each link, with the corresponding code added to the innerHTML.)
    Saved me from trying to write something from scratch which would have taken hours to figure out, with my limited JS knowledge.

  • This solution is not really good for multiple instances. I am working on an easier solution for multiple uses made with jQuery. A new post will come shortly.

  • I’m happy you found this useful. When I look back at it I find a lot of room for improvement. I’ve been working with web development professionally for over a year now and I’ve learned a lot of new things. I haven’t been so active here for a while now, but some updates are coming soon.

  • To use this on multiple pages, simply add the code into a new file and call it ‘bannerrotator.js’.

    Then in the head of every page you want to use it on, simply include a reference to the file:

    Then simply add the target container to the page:

    If you want to use this script to add banners in more than one place on the same page simply change this line in the js file:
    //Gets the div that will display banners.
    var ad_element = document.getElementById(“ad”);

    to:
    //Gets the div that will display banners.
    var ad_element = document.getElementsByClassName(“ad”);

    Then place the following container(s) on your page, where ever you want the ad(s) to appear:

    I hope this helps.