How to to display separate iframe in every N second?

Question

I have read some posts and did some research before asking, if there was any duplicate post sorry about that.

It is a bit similar to this question, but I don't want the webpages to keep looping and I want the webpages to display in each iframe separately. I want to display some website with iframe every N second, the expecting result just like the following command code:

@echo off
echo "Webpage 1"
timeout 5 >nul
echo "Webpage 2"
timeout 3 >nul 
echo "Webpage 3"
timeout 4 >nul

when I try to do it with php, I used the following code:

<iframe src="http://example.com/page1" width="50%"></iframe> 
<br>
<?php sleep(5); ?>
<iframe src="http://example.com/page2" width="50%"></iframe> 
<br>
<?php sleep(3); ?>
<iframe src="http://example.com/page3" width="50%"></iframe> 
<br>
<?php sleep(4); ?>

How to avoid those pages displaying simultaneously?

Answer 1

//need jquery 
urlLists = [ "http://example.com/page1", "http://example.com/page2" ];
key = 0;
//loop
$(document).ready(function()
{
    var refreshId = setInterval( function() 
    {

    if(urlLists[key] == undefined){
     key=0;       
    }
      $('iframe').attr('src',urlLists[key]) ;
    key++;

    }, 5000);
});


//stop at last
$(document).ready(function()
{
    var refreshId = setInterval( function() 
    {

    if(urlLists[key] != undefined){
        $('iframe').attr('src',urlLists[key]) ;
         key++;   

    }else{
window.clearInterval(refreshId );
 }


    }, 5000);
});

Answer 2

In each of your pages just do a refresh header

header('Refresh: 3;url=http://example.com/page1');

Of course change 3 to the value of N.