[JS] Rotator bannerów

Mam coś takiego:

<script language="JavaScript">
<!--
baner = new Array(4);
baner[0] = '<a href="a.html" target=_blank><img src="bannner.jpg" width="468" HEIGHT="60" BORDER="0" alt=" "></a>';
baner[1] = '<a href="b.html" target=_blank><img src="baner.gif" width="468" HEIGHT="60" BORDER="0" alt=" "></a>';
baner[2] = '<a href="c.html" target=_blank><img src="banner.jpg" widtth="468" height="60" BORDER="0" alt=" "></a>';
baner[3] = '<a href="d.html" target="_blank"><img border="0" src="bannner.jpg" alt=" " width="468" height="60"></a>';
//losowe wyświetlenie
index = Math.floor(Math.random() * baner.length);
//wyświetlanie banerów
document.write("<center>");
document.write(baner[index]);
document.write("</center>");
//-->
</script>

Przy każdym przeładowaniu strony zmienia się banner, a jak zrobić, żeby zmieniał się co 20 sekund ?

<script>
baner = new Array(4);
baner[0] = '<a href="a.html" target=_blank><img src="bannner.jpg" width="468" HEIGHT="60" BORDER="0" alt=" "></a>';
baner[1] = '<a href="b.html" target=_blank><img src="baner.gif" width="468" HEIGHT="60" BORDER="0" alt=" "></a>';
baner[2] = '<a href="c.html" target=_blank><img src="banner.jpg" width="468" height="60" BORDER="0" alt=" "></a>';
baner[3] = '<a href="d.html" target="_blank"><img border="0" src="bannner.jpg" alt=" " width="468" height="60"></a>';
//losowe wyświetlenie
setTimeout(function() {
  index = Math.floor(Math.random() * baner.length);
  document.getElementById('banner').innerHTML = baner[index];
  setTimeout(arguments.callee, 20000);
}, 1);
</script>
<div id="banner"></div>