Stepping through array with time delay

Question

I have tabs on my page each containing unique content. I want to automatically rotate the tabs and content without them being clicked upon. As soon as the page loads I want this function to begin using window.onload = function().

I have the following JavaScript array:

var HomeTabs = [1, 3, 5, 7, 9, 11]

I want to know how to show HomeTab 1 for 10 secs and then move to HomeTab 3 and then after 10 secs move to HomeTab 5 in that order, not random. when it gets to HomeTab 11 it then goes back to HomeTab 1 again.

I have a script to change the tab which is ChangeTab(1), where one is the number of the tab I want to show.

Answer 1

Use the setInterval method to call a function every ten seconds:

window.onload = function(){

  var HomeTabs = [1, 3, 5, 7, 9, 11];
  var index = 0;

  function nextTab() {
    ChangeTab(HomeTabs[index]);
    index = (index + 1) % HomeTabs.length;
  }

  nextTab();

  window.setInterval(nextTab, 10000);

};

Answer 2

you can always use a setTimeout in a function, something like

function startRotating(currentIndex) {

  // do some checking on currentIndex

  setTimeout(function(){
      startRotating(currentIndex + jump)
  },10000);
}

that wont work as written, but you can expand it from there.