var bannerImg = new Array();
  // names of the images 
  bannerImg[0]="uploads/images/image.jpg";
  bannerImg[1]="uploads/images/image1.jpg";
  bannerImg[2]="uploads/images/image2.jpg";
  bannerImg[3]="uploads/images/image3.jpg";
  bannerImg[4]="uploads/images/image4.jpg";
  bannerImg[5]="uploads/images/image5.jpg";
  bannerImg[6]="uploads/images/image6.jpg";
  bannerImg[7]="uploads/images/image7.jpg";
  bannerImg[8]="uploads/images/image8.jpg";
  bannerImg[9]="uploads/images/image9.jpg";
  bannerImg[10]="uploads/images/image10.jpg";        

var ban;
var newBanner = 0;
var totalBan = bannerImg.length;

///// this rotates the images once startBan() has run once
function cycleBan() {
  newBanner++;
  if (newBanner == totalBan) {
    newBanner = 0;
  }
  ban = document.getElementById("banner");
  ban.src=bannerImg[newBanner];

  //"4*1000" is 4 seconds
  setTimeout("cycleBan()", 4*1000);
}

/// this function is to start the cycling, gives longer time for initial image loading
function startBan(){
//"6*1000" is 6 seconds
  setTimeout("cycleBan()", 6*1000);
}

window.onload=startBan;