在许多不同的代码之后，这是我最接近它的工作。每个按钮都有效(上一个、下一个和暂停)，但我需要设置暂停按钮以在第二次单击后恢复幻灯片放映。我不在乎幻灯片是否从中断处继续播放，只要继续播放即可。我也不想添加第四个(播放)按钮或将暂停按钮更改为播放按钮，只需简单地切换(停止演出/重新开始演出)即可。
这已经接近工作了。谁可以帮助我添加适当的东西以使其工作(恢复)而无需编写全新的代码？谢谢!
<!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Transitional//EN" "http://www.w3.org/TR/xhtml1/DTD/xhtml1-transitional.dtd">
<html xmlns="http://www.w3.org/1999/xhtml">
<head>
<meta http-equiv="Content-Type" content="text/html; charset=utf-8" />
<title>Untitled Document</title>
<script type="text/javascript" src="../js/jquery.js"></script>
<script type="text/javascript">
$(function () {
$('.fadein img:gt()').hide();
var active = true;
var interval = setInterval(intervalFunction, 4000);
$('.pauseButton').click(function () {
if (!active) interval = setInterval(intervalFunction, 4000);
else clearInterval(interval);
});
function intervalFunction() {
$('.fadein :first-child').fadeOut()
.next('img').fadeIn()
.end().appendTo('.fadein');
}
});
$(function () {
$('.fadein img:gt(0)').hide();
$('.nextButton').on('click', function () {
$('.fadein :first-child').fadeOut()
.next('img').fadeIn()
.end().appendTo('.fadein');
});
$('.previousButton').on('click', function () {
$('.fadein :last-child').fadeIn()
.insertBefore($('.fadein :first-child').fadeOut());
});
});
</script>
<style type="text/css">
.fadein { position:relative; width:450px; height:275px; }
.fadein img { position:absolute; left:0; top:0; }
#showcontainer {
width: 530px;
height: 315px; }
#btn1 {
float: left;
width: 40px;
height: 80px; }
#show {
float: left;
width: 450px;
height: 275px; }
#btn2 {
float: left;
width: 40px;
height: 80px; }
#btn3 {
width: 80px;
height: 30px; }
.nextButton, .previousButton, .pauseButton { cursor: pointer }
.content {
color: #443e33;
line-height: 150%;
}
</style>
</head>
<body>
<div id="showcontainer">
<div id="btn1"><img src="../images/btn_prev.png" width="40" height="80" vspace="100" class="previousButton"/></div>
<div id="show" class="fadein">
<img src="../gallery/slide/slide1.png" width="450" height="275" />
<img src="../gallery/slide/slide2.png" width="450" height="275" />
<img src="../gallery/slide/slide3.png" width="450" height="275" />
<img src="../gallery/slide/slide4.png" width="450" height="275" />
<img src="../gallery/slide/slide5.png" width="450" height="275" />
<img src="../gallery/slide/slide6.png" width="450" height="275" />
<img src="../gallery/slide/slide7.png" width="450" height="275" />
<img src="../gallery/slide/slide8.png" width="450" height="275" />
</div>
<div id="btn2"><img src="../images/btn_next.png" width="40" height="80" vspace="100" class="nextButton"/></div><br />
<div id="btn3"><img src="../images/btn_pause.png" width="80" height="30" class="pauseButton"/></div>
</div>
</body>
</html>
这是 jsfiddle:http://jsfiddle.net/8mNAn/1/ 预先感谢您的帮助!
最佳答案
您似乎忘记切换 active 标志:
$('.pauseButton').click(function () {
if (!active) interval = setInterval(intervalFunction, 4000);
else clearInterval(interval);
active = !active; // << MISSING BIT
});
关于javascript - 无法让我的 JavaScript 暂停按钮恢复 - 即将完成，我们在Stack Overflow上找到一个类似的问题： https://stackoverflow.com/questions/22148902/