Learn how to create a banner system that rotates your banners without the user having to refresh. Using javascript you can make a nicely flowing rotating banners script that doesn't require the user to refresh at anytime, good for ad systems.

Alright, let's jump right into this tutorial.

First we start off our HTML document -

PLAIN TEXT
HTML:
  1. <!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Transitional//EN">
  2. <html xmlns="http://www.w3.org/1999/xhtml">
  4. <title>Rotating Banners</title>
  5. <script language="Javascript" type="text/javascript">
  6. <!-- Hide from old browsers

Alright so all this piece of code does is start our HTML document and then start a Javascript area to put some javascript code.

Now we need to create the actual code that goes into the javascript area.

PLAIN TEXT
JavaScript:
  1. adImages = new Array("images/banner.jpg","images/banner1.jpg","images/banner2.jpg")
  2. thisAd = 0
  3. imgCt = adImages.length

This piece of code creates 3 new variables, our first variable adImages is a varialbe that an array is set to wtih the URL's to our banners. Then our other 2 variables are used for the length of our banner rotation and how many banners we have to rotate.

PLAIN TEXT
JavaScript:
  1. function rotate() {
  2. if (document.images) {
  3. thisAd++
  4. if (thisAd == imgCt) {
  5. thisAd = 0
  6. }

That last piece of code creates a new function called rotate(). This is the function that actually rotates our banners, thisAd++ is what adds one to our counter and rotates our banner.

PLAIN TEXT
JavaScript:
  1. document.adBanner.src=adImages[thisAd]
  2. setTimeout("rotate()", 3 * 1000)
  3. }
  4. }
  5. // End hide script from old browsers -->
  6. </script>
  7. </head>

This piece of code sets the timeout for our banner, in other words how long it takes for the banners to rotate in between each banner.

PLAIN TEXT
HTML:
  1. <body onload="rotate()">
  3. <img src="images/banner1.gif" name="adBanner" alt="Ad Banner" />
  4. </center>
  5. </body>
  6. </html>

This last piece of code finishes off our script. Once the document is loaded our function rotate() is loaded. (This is what the onload="rotate()" does in our body tag). Then we put in our image and give it a name of "adBanner". This corresponds to what we put in our javascript function, so now it knows which image to rotate.

PLAIN TEXT
JavaScript:
  1. <!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Transitional//EN">
  2. <html xmlns="http://www.w3.org/1999/xhtml">
  3. <head>
  4. <title>Rotating Banners</title>
  5. <script language="Javascript" type="text/javascript">
  6. <!-- Hide from old browsers
  7. adImages = new Array("images/banner.jpg","images/banner1.jpg","images/banner2.jpg")
  8. thisAd = 0
  9. imgCt = adImages.length
  10. function rotate() {
  11. if (document.images) {
  12. thisAd++
  13. if (thisAd == imgCt) {
  14. thisAd = 0
  15. }
  16. document.adBanner.src=adImages[thisAd]
  17. setTimeout("rotate()", 3 * 1000)
  18. }
  19. }
  20. // End hide script from old browsers -->
  21. </script>
  22. </head>
  23. <body onload="rotate()">
  24. <center>
  25. <img src="images/banner1.gif" name="adBanner" alt="Ad Banner" />
  26. </center>
  27. </body>
  28. </html>

Theres our finished code.

Now we just need 3 images and place them all in an images directory.

I have been nice and created 3 banners, you can use them on your website. I actually encourage you use it (Well the one that is nicest)

http://www.tutorialcode.com/images/banner.jpg
http://www.tutorialcode.com/images/banner1.jpg
http://www.tutorialcode.com/images/banner2.jpg

So as you can see I have created 3 banners, use them if you want.

So, that's all! Thanks for reading my tutorial. If you have any questions use the contact form and we will address your comments or questions!

Sean

Share and enjoy our tutorial : These icons link to social bookmarking sites where readers can share and discover new web pages.
  • Digg
  • StumbleUpon
  • del.icio.us
  • Fark
  • Furl
  • Slashdot
  • Netscape
  • BlinkList
  • Ma.gnolia
  • Reddit
  • Technorati