Wednesday, March 18, 2009

JavaScript Ad Rotation

We just tried to implement a small mini ad rotation for a demo. There so many examples for doing it on client side using JavaScript, but so many are just not working. Therefore, please find attached how to implement it in 3 steps:

1. Place the following code is jsRotate.js
function init() { // Specify the image files window.Pic = new Array(); window.Pic[0] = './images/ulogo0.jpg'; window.Pic[1] = './images/ulogo1.jpg'; window.Pic[2] = './images/ulogo2.jpg'; window.Pic[3] = './images/ulogo3.jpg'; window.Pic[4] = './images/ulogo4.jpg'; // Set slideShowSpeed (milliseconds) window.slideShowSpeed = 3000; // Duration of crossfade (seconds) var crossFadeDuration = 3; // No need to edit var t; window.j = 0; window.p = window.Pic.length; } function runSlideShow(){ if (document.all){ document.images.SlideShow.style.filter="blendTrans(duration=2)"; document.images.SlideShow.style.filter="blendTrans(duration=crossFadeDuration)"; document.images.SlideShow.filters.blendTrans.Apply(); } document.images.SlideShow.src = window.Pic[j];//./images/ulogo3.jpg';//; if (document.all) { document.images.SlideShow.filters.blendTrans.Play(); } window.j = window.j + 1; if (window.j > (window.Pic.length-1)) { window.j = 0; } t = setTimeout('runSlideShow()', window.slideShowSpeed); }

2. Add a reference to js file inside the head tag using the script tag:
...script language="javascript" src="./scripts/jsRotate.js"...

3. Place the following code just before the /body tag (ya, where you can find the Google Analytics code...)

script language="JavaScript" type="text/javascript"... init(); runSlideShow(); ...script...

It's so simple as 1,2,3...

No comments:

Post a Comment