Auto-looping banners using JavaScript

Learn how to create auto looping banners using JavaScript! In this article, we learn how to rotate banners in a loop with a specified delay. The script will count the number of banners present in the specified location and set the automatic loop of all the banners.

Understanding the Source code:

There are 2 parts in this tutorial. The first part explains how to arrange the banners in a sequence and in the second one describes how the JavaScript function works.

Part1: The banners:

Each banner has to be placed inside individual “span” tags. All the banner collectively will be placed inside a single div.

By default, all the span tags [banners] will have the default “display” property as “none”. See the style sheet code for details:

div#partentDivID span{display:none;}

NOTE: In this “partentDivID” is the div tag’s Id. It is in side this div tag all the banners contain, in the order in which the banners needs to be rotated/looped. All the span tags [contains individual banner] will be in “display:none” status, initially.

Following is the HTML code in the body tag:

<div id=”partentDivID”>
<span>banner1</span>
<span>banner2</span>
<span>banner3</span>
<span>banner4</span>
<span>banner5</span>
<span>banner6</span>
<span>banner7</span>
</div>

To add more banners in the loop, just add a new span tag along with the existing span tags and place the banner inside it.

Following is the Event code for the looping function:

<script type=”text/javascript”>
rotateBanner(‘partentDivID’);
</script>

Part2: The JavaScript Code:

In the second part of this article, let’s analyze the JavaScript function flow.

Section 1:

var bannerLoopInstance = 0;
function rotateBanner(BannerHolder){
setSpanID(BannerHolder);
doRotation(BannerHolder);
}

NOTES: “rotateBanner” funcntion is defined. At first, the function “setSpanID” is invoked and then the function “doRotation” is invoked.

Section2:

function setSpanID(BannerHolderForId){
var divInConcern = document.getElementById(BannerHolderForId);
var spansIndivInConcern =divInConcern.getElementsByTagName(“span”);
var numberOfActiveSpans = spansIndivInConcern.length;
for(L=0;L<numberOfActiveSpans; L++) {
spansIndivInConcern[L].setAttribute(“id”,BannerHolderForId+L);
}
}

NOTES: The above function (setSpanID), counts the total number of span tags (banners) inside the specified div tag (partentDivID) and then sets a unique “id” value to each one of them.

Section3:

function doRotation(bannerHolderDiv){
var HolderdivInConcern = document.getElementById(bannerHolderDiv);
var spansIndivInConcernBanner =HolderdivInConcern.getElementsByTagName(“span”);
numberOfActivebanner = spansIndivInConcernBanner.length;
bannerHolderDiv4loop =bannerHolderDiv;
document.getElementById(bannerHolderDiv4loop+0).style.display =”block”;
setTimeout(“rotatePlayBack(numberOfActivebanner,bannerHolderDiv4loop)”,2000);?
}

Notes: The above code, starts the initial looping display of banners and then after the specified time delay, a new function is invoked (rotatePlayBack).

Section4:

function rotatePlayBack(maxNumberOfBannersloopBack,bannerHolderDiv4loopback){
maxLoopVal = maxNumberOfBannersloopBack;
currElementObj = bannerHolderDiv4loopback;
rotatePlay(maxLoopVal,currElementObj);
}

Notes: the above function sends a loop back routing to another function for mutual looping (rotatePlay), with no delay.

Section5:

function rotatePlay(maxNumberOfBanners,bannerHolderDiv4loop){
maxLoopNum = maxNumberOfBanners;
bannerNameHolder = bannerHolderDiv4loop;
document.getElementById(currElementObj+bannerLoopInstance).style.display =”none”;
bannerLoopInstance++;
if(bannerLoopInstance<maxNumberOfBanners){
document.getElementById(bannerHolderDiv4loop+bannerLoopInstance).style.display =”block”;
setTimeout(“rotatePlayBack(maxLoopNum,bannerNameHolder)”,2000)
}
else {
bannerLoopInstance=0;
document.getElementById(bannerHolderDiv4loop+0).style.display =”block”;
setTimeout(“rotatePlay(maxLoopNum,bannerNameHolder);”,2000); ?
} ?
}

NOTES: the above function loops through all the banners in the specified time-delay and displays them in the a loop.

Click here to download the source code: