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