Well that was asking to be re-done.
I hope you're not intending to frame pages from another domain.
( Chrome needs to be running under http: protocol )
Code:
<!DOCTYPE html>
<head>
<meta http-equiv="Content-Type" content="text/html; charset=utf-8" />
<title>Rotating Page</title>
<style type="text/css">
* {
margin:0;
padding:0;
border:0;
}
html, body{
height:100%;
width:100%;
overflow:hidden;
}
iframe{ width:100% }
#ifHolder{ width:80%; margin-left:10% }
</style>
</head>
<body>
<div id='ifHolder'>
<iframe id="holder" src="page1.html" frameborder="0" scrolling="no"></iframe>
<p>
<input type='button' id='toggleBtn' value='Stop/Start'>
</div>
<script type="text/javascript"> /* Place BELOW iframe */
function iframeCycler( iframeID, seconds )
{
var pages = new Array(),
ifr = document.getElementById( iframeID ),
idx = 0,
timer = null;
for( var i = 2, arg; ( arg = arguments[ i ] ); i++ )
pages.push( arg );
function f()
{
if( idx >= pages.length )
idx = 0;
ifr.setAttribute('src', pages[ idx++ ] );
}
function toggle()
{
if( timer )
{
clearInterval( timer );
timer = null;
}
else
timer = setInterval( f, seconds * 1000 );
}
function addHandler( obj, evt, func )
{
obj.attachEvent ? obj.attachEvent( 'on'+evt,func ) : obj.addEventListener( evt, func, false );
}
addHandler( ifr, 'load', (function( iframe, func )
{
return function()
{
try
{
iframe.contentWindow.document.onclick = func;
}
catch(e){}
}
})( ifr, toggle ) );
toggle();
return toggle;
}
document.getElementById( 'toggleBtn' ).onclick = iframeCycler( 'holder', 1, 'page1.html', 'page2.html', 'page3.html' ); /*<- OK to add more pages */
</script>
</body>
</html>