幻燈片javascript播放/暫停按鈕
[英]Slideshow javascript play/pause button
問題描述
我正在使用“播放/暫停”按鈕以Javascript進行幻燈片演示。 當我按一下按鈕時，幻燈片開始播放。 當我第二次按下時，幻燈片必須停止。 我只是不知道如何將該功能放在一個按鈕中。
這是我的代碼：
<!DOCTYPE html>
<html>
<head>
<meta charset="utf-8" />
<title>Oefening 19.7</title>
<link href="stijl_Oefening19_6.css" rel="stylesheet" />
<script>
var i = 0;
var foto = new Array(3);
var timer;
foto[0] = "images/slideshow/slideshow1.png";
foto[1] = "images/slideshow/slideshow2.png";
foto[2] = "images/slideshow/slideshow3.png";
foto[3] = "images/slideshow/slideshow4.png";
function slide() {
document.getElementById("slideshow").src = foto[i];
if (i < foto.length - 1) i++;
else i = 0;
timer = setTimeout("slide()", 3000);
}
</script>
</head>
<body>
<div id="portfolio">
<img src="images/slideshow/slideshow1.png" id="slideshow" alt="slideshow" />
</div>
<div id="button">
<a href="#" id="startcycle" onclick="slide()">
<img id="btnCycle" src="images/slideshow/cyclebutton.png" />
</a>
</div>
</body>
</html>
1 個解決方案
解決方案1
1 已采納 2015-05-27 10:12:08
使用setInterval（）代替。 並將開關功能和滑動功能分開。
function slide() {
document.getElementById("slideshow").src = foto[i];
i = (i + 1)%foto.length;
}
function setTimer(){
if (timer) {
// stop
clearInterval( timer );
timer=null;
}
else {
timer = setInterval("slide()",1000);
}
}
讓按鈕調用setTimer（）。
在僅幻燈片放映JavaScript上添加播放/暫停按鈕
聲明:本站的技術帖子網頁，遵循CC BY-SA 4.0協議，如果您需要轉載，請注明本站網址或者原文地址。任何問題請咨詢:yoyou2525@163.com.