Auto Rotating Ad Banner, No iFrame, No Page Refresh..And It’s Free!

I’ve spent the last two days looking for a free script that will rotate an ad banner without requiring a page refresh, an iFrame with a meta refresh tag or anything else that might need visitors to perform an action to get the ads to rotate. Two days! But I found one :)

Updated Script and Instructions Here

I originally wanted a php script so that all the work would be done by my server and not require Javascript to be enabled in a visitor’s browser. I quickly found that it’s easy to find a php script that rotates banners and text on page refreshes but not easy to find one that requires no user interaction to effect the ad rotation. I did find one php solution but it required me to set-up a banner exchange (yes, it was banner exchange software) and that’s a little too much work for what I want.

The solution I’ve settled on uses Javascript. Not what I was looking for but it does exactly what I need. I found my script at Dynamic Drive. It isn’t designed for ad banners, it’s designed to auto scroll images without page refreshes. I had to make few changes to the css and html to make it function as required but it works just fine.

To see it in action visit JournalXtra’s Webmaster Tools Portal and view the ad at the top right-hand side of the page. Yes, it dynamically loads ads without user interaction.

The script is known to work  in Firefox 1+, Internet Explorer 6+ and Opera 9+. It didn’t work in Konqueror but that might relate to my Java settings. I use AdBlock Plus in Firefox 3 and I am still able to see ads rotate in the ad box.

This script is often incompatible with meta refresh tagsSome readers have had problems getting this script to work when their web pages contain a meta refresh tag between their <head></head> tags. If your ads fails to display properly you should remove any meta refresh tags to confirm whether or not they are affecting the proper functioning of the script.

The Instructions

The Header

Copy and paste the below code into your page’s head section (i.e between its <head> and </head> tags):

The Javascript and CSS

Next, upload the Javascript and CSS files referenced by the above code. Put them in the same directory (folder) as your web page. For example, if your web page is browsed from then you should upload the CSS and JS files to your site’s top most directory (the root directory); if your web page is browsed at then upload the CSS and JS files to the “my-folder” directory.

Here is the JS file:


Copy the code found at that page and paste it into a file called “featuredcontentglider.js”.

The original CSS is unsuited to our purpose so here is an edited version of it. Copy and paste the edited version into a file called “featuredcontentglider.css”:

The original CSS is available from:


The Ad Display Code

Next, you must place some code into your web page to display your ads. I’ve encased the code between <div></div> tags with an id of “rotatedads”:

Substitute your own advert code wherever it says “Advert Code One”, “Advert Code Two” and “Advert Code Three”. Create more advert code <div></div> boxes if required.

You might wonder why I chose to hide the toggle box (shown by <div id=”p-select”> instead of just removing it. The toggle box forms part of the script. When it’s fully removed, the script no longer works; so keep it in.

More information about this featured content glider’s settings options is available from Dynamic Drive.

Please leave a comment if you need help converting the code to display your adverts. I’ll do my best to help you.

  Copyright secured by Digiprove © 2010

Leave a Reply

19 Comments on "Auto Rotating Ad Banner, No iFrame, No Page Refresh..And It’s Free!"

newest oldest most voted
Notify of

hello, i try, but dont work…
i have a website (blog wordpress), movie site, i need add “ad rotate”.

sorry for my english

look this code:

//i paste this on sidebar, after add file call “ad.php” with id “ad160x600″… dont work

this work in a website, but i dont see the original file “url_ad” (the source code), website like a yahoo implemet this, help me please…

thanks (again)

Hey Franco,

You can use the code shown above in WordPress too. See comment number 3 (below) for the intructions.


Hi Monica, if your theme does’t allow widgets to be added to your sidebars you will need to do a bit of editing to it. It isn’t something I’ve had to do because I use the Suffusion theme which is highly customizable; however, I have found two easy to follow guides for widget enabling WordPress themes:

It looks easy enough. If you need any help with it I will oblige as best I can :-)

I’ve done exactly what u’ve said but I still cant get it – I have 2 banners. When I put this code “<? include(“add-display-code.php”); ?>” in sidebar.php – both the banners appear but below each other – they dont rotate – whats that about

This is what I’ve done
Added the first script (the header script) into the Add to Header plugin’s header field.
Put the CSS and JS files into the root directory of your WordPress installation
Put the Add Display Code into a file called add-display-code.php and saved it in Wordpress installation’s root directory .
Addeed “<? include(“add-display-code.php”); ?>”  in sidebar.php
Pls help

Monica, I will be able to offer more help in a couple of hours. I suspect that the Javascript is either not loading or is being interfered with by something else. Just a test here but what happens if you move the header script from Add to Header and put it directly into your template’s header file (between its <head></head> tags)? Post your URL and I’ll take a closer look at it for you. I sent you an email about 20 minutes ago so if you don’t want to post the URL publicly just send me it in a reply… Read more »
Monica, it appears as though theory and practice don’t quite blend with this topic. I’ve been looking for a solution and I believe that the fault has something to do with a conflict between the jquery library required for the script and the jquery library used by WordPress. I’ve tried a workaround using an iframe to embed a modified version of add-display-code.php but (even with an iframe embedding widget) the ads fail to load. An example of the script working on a page of its own is available here. An example of it not embedding within WordPress is available here… Read more »

I have the code in my header.php file. The ads change when I press the left and right keys, but they are not auto rotating. The very first ad just keeps reappearing. odd. I do have true for the autorotate parm.

Hi David, I suspect the script doesn’t work because of the auto refresh meta tag you’ve placed in your header. It isn’t required for the script to work, I would remove it: <meta HTTP-EQUIV="REFRESH" CONTENT="5"></meta> The ads rotate when you press the arrow keys because the script is designed for viewing images such as in a gallery. The edits I’ve made to the CSS and HTML hide the back and forward controls. Also, meta tags are self closing (like image tags <img /> and line break tags <br /> (space intended)). So your meta tags can be written (using the… Read more »

That was it…. Thanks so much. The refresh was left over from another rotation solution I tried. Working perfect now.

You’re welcome, let me know if you need any other help and I’ll do what I can.

I am trying to rotate ad banners. Some are html and some are javascript links.
The test page will show only the first ad. What am I missing?
Also the banner seems to be right justified instead of centered.
I’m pretty green with javascript…..

Hi Stan, The ads on your test page seem to rotate just fine when viewed by me (with Firefox 3.6.3, Linux 64-bit). So I assume you’ve resolved the issue you had, if not try cleaning your browser cache before reloading the page. You can adjust the position of the banner in one of two ways: Put it in a <div> box and specify “margin: 0 auto;” in its CSS; else (easier) Edit the CSS of the featuredcontentglider.css file. To change the featuredcontentglider.css file, replace .glidecontentwrapper{ position: relative; /* Do not change this value */ width: 728px; /* Width of longest… Read more »

Re-reading your posts solved my basic problem — I had a refresh meta tag that was causing the problem.


Thank you for keeping me updated – I’ll update the post to explain that the script is incompatible with meta refresh tags.

Thanks for posting this. It works very nicely!

Hello!  great script.  I have one question: How can I do multiple ad spots on the same page?  Right now, in copying your script 4 times, I get all four spots working, but they loads the first set of ads int eh first spot first, then the second, then third, etc.  I am missing something obvious, but not sure what–any ideas?  You can see the current script and results at

No sure if this page is still supported but how can i have the ads changed on page refresh instead of auto rotate after x seconds since it’s against the tos/terms of most adnetworks.

Thnx, great script and tutorial :)

Free to your inbox

Join our mailing list to receive the latest news and updates from JournalXtra.

You have Successfully Subscribed!