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

以下、このようなとしてclearInterval方法は、あなたがたsetInterval 'を試してみます'と' clearInterval' – prasanth

JavaScriptについて知りませんか？ – Etienne

使用setIntervalと

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を知りません。私の例のようにすべてのコードを正しい場所に置いてください。 – Etienne

確かに、あなたのonloadイベントの幅と高さは、小さな画面には適応していません。だから私は小額の値 – prasanth

を上記の答えと同じように答えていたが、onloadイベントは削除された。ちょうどそのことを確認してください。 – prasanth

JavaScriptのページを一時停止/再生するとローテーション

答えて

関連する問題