setInterval + loop - how do i use it?

[grahamarrowsmith]

Hi,

I'm a bit stuck using setInterval. I've got a folder of 20 images that I need to animate in on a page via dhtml with a 3-4 second delay between each image.

I've setup the script below to do the business however it looks like each instance of the animateGallery function interferes with every other so it seems random as to what image is swapped in rather than i being incremented from 0 to 20...

you can check it out at:

http://www.practicaldesign.co.uk/client/afullcircle/v4/

Before any hecklers get in and say doh, use flash or why isn't it NS/Opera etc compatable this is being built to a DHTML brief and this is the only route I've got.

Any help would be greatly appreciated!!!!
Graham

var id=0;
function showGallery(set){
GA_fade('designlyr1txt',sgif,1,'designleft_arrow',sgif,1);
MM_showHideLayers('designlyr1','','hide');MM_showHideLayers('gallery','','show');MM_showHideLayers('galleryswipe','','show');
animateLayer('gallery',162,100,18,20,0,4);
for(i=0;i<20;i++){
timer=i*10000;
id=window.setInterval(&quot;animateGallery(\'&quot;+set+&quot;\',&quot;+i+&quot;&quot;,timer);
}
currentsection=&quot;gallery&quot;;
}
function animateGallery(set,navimg){
animateLayer('gallery',162,-100,18,20,0,40);navimg=navimg+2;
window.setTimeout(&quot;MM_swapImage(\'galleryswipeimg\',\'\',\'images/weddings/&quot;+set+&quot;/&quot;+navimg+&quot;.jpg\',1)&quot;,4000);
animateLayer('galleryswipe',162,100,18,20,0,40);//40
animateLayer('galleryswipe',162,-100,18,20,0,80);//80
window.setTimeout(&quot;MM_swapImage(\'galleryimg\',\'\',\'images/weddings/&quot;+set+&quot;/&quot;+navimg+&quot;.jpg\',1)&quot;,8000);navimg=navimg+1;
window.setTimeout(&quot;moveLayer(\'gallery\',660,100,1)&quot;,8000);
animateLayer('gallery',162,100,18,20,0,80);
window.setTimeout(&quot;moveLayer(\'galleryswipe\',660,100,1)&quot;,10000);
//window.clearTimeout(timerid);id=0;
}