gpt4 book ai didi

JavaScript 页面旋转并暂停/播放

转载 作者:行者123 更新时间:2023-12-03 05:37:32 29 4
gpt4 key购买 nike

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

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

最佳答案

使用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>

关于JavaScript 页面旋转并暂停/播放,我们在Stack Overflow上找到一个类似的问题: https://stackoverflow.com/questions/40672018/

29 4 0
Copyright 2021 - 2024 cfsdn All Rights Reserved 蜀ICP备2022000587号
广告合作:1813099741@qq.com 6ren.com