Scrolling JavaScript Banners: Rotating the Messages - Doc JavaScript
Rotating the Messages
As you already know, the onload
event handler invokes startBanner()
when the page has finished loading. Take another look at the function:
function startBanner() {
if (NS4)
makeNS()
else
makeIE();
fillBanner();
showMessage(0, true);
current = 0;
timeoutID = setTimeout("nextMessage()", pause);
}
The last statement calls the nextMessage()
function after pause
milliseconds. nextMessage()
is responsible for rotating the banner's messages:
function nextMessage() {
var fromInd = current;
current = (fromInd == ar.length - 1) ? 0 : fromInd + 1;
scrollBanner(fromInd, current);
}
The index of the current messages is assigned to fromInd
, a local variable. current
then advances to the index of the next message. Suppose the banner features 12 messages, as in our example. In this case the value of ar.length
is 12, and the index of the array's last element is 11, or ar.length - 1
. If the banner is currently displaying the banner's third message, ar[2]
, current
is worth 2 at the beginning of the function. The fromInd
variable is then assigned 2, and current
is assigned 3 (fromInd + 1
) because fromInd
is not equal to ar.length - 1
, which is 11 in this example. Let's consider another situation, where current
is 11 before the function is invoked. In this event fromInd
is assigned 11, and current
wraps around to 0, because it is equal to the index of the array's last element, ar.length - 1
.
The function's last statement calls scrollBanner()
with two arguments: the index of the current message, and the index of the next message. Once scrollBanner()
has finished swapping the specified messages, it invokes nextMessage()
again (after another break of pause
milliseconds).
Created: February 10, 1998
Revised: February 10, 1998
URL: https://www.webreference.com/js/column13/rotate.html