JavaScript頁面暫停/播放旋轉

請注意，它只能是JavaScript。請參閱下面我目前的HTML。我需要像當前代碼一樣在頁面之間旋轉。但是，我需要能夠在頁面之間暫停/播放。JavaScript頁面暫停/播放旋轉

<!DOCTYPE html> 
 
    <html xmlns="http://www.w3.org/1999/xhtml"> 
 
    <head> 
 
     <title></title> 
 
    </head> 
 
    <body> 
 
    
 
     <iframe id="rotator" src="http://www.example.com" onload="this.width=1000;this.height=750;"></iframe> 
 
    
 
     <script> 
 
      // start when the page is loaded 
 
      window.onload = function() { 
 
    
 
       var urls = [ 
 
        "http://www.example.com", 
 
        "http://www.example2.com", 
 
        // .... 
 
        "http://www.example3.com" 
 
       ]; 
 
    
 
       var index = 1; 
 
       var el = document.getElementById("rotator"); 
 
    
 
       setTimeout(function rotate() { 
 
    
 
        if (index === urls.length) { 
 
         index = 0; 
 
        } 
 
    
 
        el.src = urls[index]; 
 
        index = index + 1; 
 
    
 
        // continue rotating iframes 
 
        setTimeout(rotate, 15000); 
 
    
 
       }, 15000); // 5000ms = 5s 
 
      }; 
 
     </script> 
 
    
 
    
 
    </body> 
 
    </html>

來源

2016-11-18 Etienne

有你嘗試用'的setInterval ''和'clearInterval' – prasanth

對不起，我不知道JavaScript或什麼是 – Etienne

使用setInterval和clearInterval方法，這樣下面

var run; 
 
var el =document.getElementById('rotator'); 
 
var urls = [ 
 
        "http://www.example.com", 
 
        "http://www.example2.com", 
 
        
 
        "http://www.example3.com" 
 
       ]; 
 
(function() 
 
{ 
 
    run = setInterval(rotate , 1000) 
 
    console.log('start') 
 
})() 
 

 
var index=0; 
 
function rotate(){ 
 
if (index === urls.length) { 
 
         index = 0; 
 
        } 
 
       el.src = urls[index]; 
 
        index ++; 
 
           } 
 

 
function pause(){ 
 
clearInterval(run); 
 
    console.log('pause') 
 
} 
 
function play(){ 
 
run = setInterval(rotate , 1000); 
 
    console.log('play'); 
 
}

<iframe id="rotator" src="http://www.example.com" ></iframe> 
 
<button onclick="pause()"> 
 
pause 
 
</button> 
 
<button onclick="play()"> 
 
play 
 
</button>

來源

2016-11-18 08:43:27 prasanth

對不起，我不知道JavaScript，你可以請所有的代碼放在正確的位置，如我的例子，不知道在我的HTML頁面添加代碼的位置。 – Etienne

你確定，但你的onload事件的寬度和高度是高度不適應小屏幕。所以我申請與小值 – prasanth

上面的答案都與你的答案相同，但onload事件只刪除。親愛的檢查與 – prasanth

JavaScript頁面暫停/播放旋轉

回答

相關問題