How to rotate url in iFrame in javascript

I have 2 arrays (I read from XML file):

• urlsInclude URL
• durationsContains an integer representing seconds

I want to iterate through these arrays ( starting from the beginning 0when reaching the end ) to display in an iFrame:

• urls[0].innerHTMLin durations[0]seconds
• urls[1].innerHTMLin durations[1]seconds
• urls[2].innerHTMLin durations[2]seconds

etc...

For this I have the following code:

while (i <= len) {
    $j('.marquee').attr('src',urls[i].innerHTML);
    setTimeout(function(){
        i++;
        if (i >= len) {i = 0;} 
    },parseInt(duration[i].innerHTML) * 1000);
}

Then I realized this would run a million times in a loop before reaching the first timeout calling the function and increasing the timeout i.

So I just want to pause the code, but I immediately see in many stackoverflow questions that doing this is a really bad idea.

So the question is, how can I do this?

As a bonus question...where should I fade in(fade out) and/or fade out(fade out)() between urls?