我正在尝试制作一个javascript幻灯片（这里是小提琴），自动播放每张幻灯片的音频，功能是允许右箭头（下一张幻灯片）、左箭头（上一张幻灯片）或空格键从当前幻灯片播放到最后一张幻灯片，空格键也用于暂停幻灯片（然后再次继续），等等）。
我遇到的唯一问题是让空格键暂停幻灯片放映。为了进行调试，我在控制台暂停时登录到控制台，它似乎执行此功能的次数与幻灯片编号相同，尽管实际上没有暂停幻灯片放映--例如，如果在幻灯片2上按空格键，它会执行两次，但如果在幻灯片4上再次按空格键，它执行6次（2+4），以此类推。
我最近尝试了以下代码，但没有成功：
(function loop(){
var breakout;
window.addEventListener('keydown', function(secondkey) {if (secondkey.keyCode == 32){breakout = "1"; console.log("paused on slide #" + slidenumber + "!");}})
if (slidenumber >= slidelength || breakout == "1") return;
setTimeout(function(){
if (breakout == "1") return;
console.log("slide #: " + slidenumber);
showDivs(slidenumber += 1);
loop();
}, 1000);
})();我还尝试了以下失败代码：
(function loop() {
var breakout;
window.addEventListener('keydown', function(secondkey) {if (secondkey.keyCode == 32){breakout = "1"; console.log("paused on slide #" + slidenumber + "!");}})
setTimeout(function() {
if (slidenumber >= slidelength || breakout == "1") {console.log("breakout on slide #" + slidenumber + "!"); return;}
else {
console.log("slide ##: " + slidenumber);
showDivs(slidenumber += 1);
loop();
}
},1000);
})();…此失败代码：
for (a = slidenumber; a < slidelength; a++) {
var breakout;
window.addEventListener('keydown', function(secondkey) {if (secondkey.keyCode == 32){breakout = "1"; console.log("paused!");}})
if (breakout == "1"){break;}
(function(ind) {
setTimeout(function(){
showDivs(slidenumber += 1);
}, 2 * 1000 * ind); // Change slide every 2 seconds
})(a);
}甚至这个失败的代码：
var func = function(slidenumber){
return function(){
if (slidenumber >= slidelength) return;
console.log("turn no. " + slidenumber);
showDivs(slidenumber += 1);
var breakout;
window.addEventListener('keydown', function(secondkey) {if (secondkey.keyCode == 32){breakout = "1"; console.log("paused!");}})
if(breakout == "1") {
console.log('slideshow paused');
} else {
setTimeout(func(++slidenumber), 2000);
}
}
}
setTimeout(func(0), 2000);我该怎么做才能让它工作？我的全部代码是：
<!doctype html>
<html lang="en">
<head>
<meta charset="utf-8">
<title>Slideshow</title>
</head>
<body style="text-align: center;">
<div class="slide-content">
<img style="height:80vh;" onclick="play(1)" src="https://images.unsplash.com/photo-1541963463532-d68292c34b19?ixlib=rb-1.2.1&ixid=MnwxMjA3fDB8MHxleHBsb3JlLWZlZWR8Mnx8fGVufDB8fHx8&auto=format&fit=crop&w=700&q=60">
<audio id="audio-1" src="https://soundbible.com/grab.php?id=2218&type=mp3"></audio>
</div>
<div class="slide-content">
<img style="height:80vh;" onclick="play(2)" src="https://images.unsplash.com/photo-1546521343-4eb2c01aa44b?ixlib=rb-1.2.1&ixid=MnwxMjA3fDB8MHxleHBsb3JlLWZlZWR8M3x8fGVufDB8fHx8&auto=format&fit=crop&w=700&q=60">
<audio id="audio-2" src="http://soundbible.com/grab.php?id=2212&type=mp3"></audio>
</div>
<div class="slide-content">
<img style="height:80vh;" onclick="play(3)" src="https://images.unsplash.com/photo-1543002588-bfa74002ed7e?ixlib=rb-1.2.1&ixid=MnwxMjA3fDB8MHxleHBsb3JlLWZlZWR8MXx8fGVufDB8fHx8&auto=format&fit=crop&w=700&q=60">
<audio id="audio-3" src="http://soundbible.com/grab.php?id=2210&type=mp3"></audio>
</div>
<div class="slide-content">
<img style="height:80vh;" onclick="play(4)" src="https://images.unsplash.com/photo-1507842217343-583bb7270b66?ixlib=rb-1.2.1&ixid=MnwxMjA3fDB8MHxleHBsb3JlLWZlZWR8Nnx8fGVufDB8fHx8&auto=format&fit=crop&w=700&q=60">
<audio id="audio-4" src="http://soundbible.com/grab.php?id=2204&type=mp3"></audio>
</div>
<div class="slide-content">
<img style="height:80vh;" onclick="play(5)" src="https://images.unsplash.com/photo-1532012197267-da84d127e765?ixlib=rb-1.2.1&ixid=MnwxMjA3fDB8MHxleHBsb3JlLWZlZWR8NHx8fGVufDB8fHx8&auto=format&fit=crop&w=700&q=60">
<audio id="audio-5" src="http://soundbible.com/grab.php?id=2184&type=mp3"></audio>
</div>
<div onclick="plusDivs(-1)">Previous</div>
<div onclick="plusDivs(1)">Next</div>
<script>
var slidelength = document.getElementsByClassName("slide-content").length;
function play(nr) {
var audio = document.getElementById("audio-"+nr); audio.play();
}
var slidenumber = 1;
showDivs(slidenumber);
function plusDivs(n) {
showDivs(slidenumber += n);
}
function showDivs(n) {
var i;
var slide = document.getElementsByClassName("slide-content");
if (n > slidelength) {slidenumber = n-1} // Do not loop
if (n < 1) {slidenumber = n+1} // If left is pushed on first slide, stay on first slide
for (i = 0; i < slidelength; i++) {
slide[i].style.display = "none";
}
slide[slidenumber-1].style.display = "block";
console.log("# of slides: " + slidelength);
console.log("slide #: " + slidenumber);
play(slidenumber);
}
window.addEventListener('keydown', function(pronounce) {
if (pronounce.keyCode == 39) {showDivs(slidenumber += 1);} // Right Arrow
if (pronounce.keyCode == 37) {showDivs(slidenumber -= 1);} // Left Arrow
// Space bar, when pushed, should loop through automatically until last slide. if space bar is pushed again pause. if pushed yet again continue. etc.
if (pronounce.keyCode == 32) { // Space Bar
// Working, but not the pause
(function loop(){
var breakout;
window.addEventListener('keydown', function(secondkey) {if (secondkey.keyCode == 32){breakout = "1"; console.log("paused on slide #" + slidenumber + "!");}})
if (slidenumber >= slidelength || breakout == "1") return;
setTimeout(function(){
if (breakout == "1") return;
console.log("slide #: " + slidenumber);
showDivs(slidenumber += 1);
loop();
}, 1000);
})();
}
})
</script>
</body>
</html>
暂无答案！
目前还没有任何答案，快来回答吧！