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: