Question

请注意，它只能是JavaScript。请参阅下面我当前的HTML。我需要像代码当前那样在页面之间轮换。但是，我需要能够在页面之间暂停/播放。

＆＃13;

<!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>

＆＃13;

Answer 1

使用 setInterval 和 clearInterval 方法，如下所示

＆＃13;

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');
}

＆＃13;

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

＆＃13;

JavaScript页面旋转并暂停/播放

1 个答案: