2017-05-08 94 views
-1

我在下面使用了這個腳本。它工作正常。但我希望能夠爲iframe A設置特定的時間間隔,爲iframe B設置另一個時間間隔,爲iframe C設置另一個時間間隔。爲什麼? 例如:因爲我有第一個10秒的演示,第二個演示10分鐘,第三個演示15秒。在兩個iframe之間切換的時間間隔不同

<iframe id="myiframe" src="http://gemus.novohamburgo.rs.gov.br" 
frameborder="0"></iframe> 
<script> 
var urls = [ 
'http://www.gmail.com', 
'http://saude.novohamburgo.rs.gov.br', 
'http://www.yahoo.com', 
]; 

setInterval(function() { 
    var rand = Math.floor(Math.random()*urls.length); 
    document.getElementById('myiframe').src = urls[rand]; 
}, 15000); 
</script> 

<style> 
iframe { 
    width: 1600px; 
    height: 1080px; 
} 
</style> 

回答

0

這裏是現場演示:

我做了小班(漂亮的數據結構)

ROOT.urls和ROOT.intervals必須有相同的長度。

固定代碼段

<script> 
 

 

 
function CLASS_SWITCHING_IFRAME() { 
 

 
\t  var ROOT = this; 
 

 
\t  ROOT.urls = [ 
 
    
 
\t  'https://maximumroulette.com', 
 
\t  'https://saude.novohamburgo.rs.gov.br', 
 
    
 
\t  ]; 
 

 
\t  ROOT.intervals = [ 
 
\t  8000, 
 
\t  8000 
 
\t  ]; 
 

 
\t  ROOT.current = 0; 
 

 
\t  } 
 

 

 
\t  var MAKEINSTANCE = new CLASS_SWITCHING_IFRAME(); 
 

 

 

 
\t \t function CALL_ME() { 
 

 
\t \t \t \t var TIMER_INSTANCE = setTimeout(function(){ 
 

 
\t \t \t \t MAKEINSTANCE.current++; 
 
\t \t \t \t if (typeof MAKEINSTANCE.urls[MAKEINSTANCE.current] != 'undefined') { 
 

 
\t \t \t \t document.getElementById('myiframe').src = MAKEINSTANCE.urls[MAKEINSTANCE.current]; 
 

 
\t \t \t \t } 
 
\t \t \t \t else 
 
\t \t \t \t { 
 
\t \t \t \t \t 
 
\t \t \t \t MAKEINSTANCE.current = -1; 
 

 
\t \t \t  } 
 
        
 
\t \t \t \t 
 
\t \t \t \t CALL_ME() 
 

 
\t \t \t \t } , MAKEINSTANCE.intervals[MAKEINSTANCE.current]); 
 
\t \t \t \t 
 
\t \t \t \t 
 

 
\t \t \t } 
 
\t \t \t 
 
\t \t \t 
 
\t \t \t CALL_ME(); 
 
</script> 
 

 
<iframe id="myiframe" src="https://maximumroulette.com" style="background:black;" />

+0

這不是你的例子切換的I幀。 iframe始終是相同的。你能解決它嗎? –

+0

我已經使用一個iframe,你只需要添加隨機邏輯。 –

0

嘗試是這樣的:

<style> 
iframe { 
    width: 1600px; 
    height: 1080px; 
} 

.hidden { 
    display: none; 
} 
</style> 

<iframe id="myiframe1" src="https://de.wikipedia.org/wiki/Website" frameborder="0"></iframe> 
<iframe id="myiframe2" src="http://tomsfabian.ch" frameborder="0"></iframe> 
<iframe id="myiframe3" src="http://gemus.novohamburgo.rs.gov.br" frameborder="0"></iframe> 

<script> 
$(document).ready(function() { 
//Hide all iframes, expect the first one 
$('#myiframe2').addClass('hidden'); 
$('#myiframe3').addClass('hidden'); 

    window.setTimeout(function() { 
     $('#myiframe1').addClass('hidden'); 
     $('#myiframe2').removeClass('hidden'); 
     window.setTimeout(function() { 
      $('#myiframe2').addClass('hidden'); 
      $('#myiframe3').removeClass('hidden'); 
     }, 5000); //After 5 Seconds, change to myiframe2 
    }, 3000); //After 3 Seconds, change to myiframe2 

}); 
</script>