Question

在许多不同的代码之后，这是我最接近它的所有工作。每个按钮都可以正常工作（上一个，下一个和一个暂停），但我需要设置暂停按钮，以便在第二次单击后恢复幻灯片显示。我不在乎幻灯片是否会在它停止的地方重新开始，只要它重新开始。我也不想添加第4个（播放）按钮或暂停按钮更改为播放按钮，只需简单地切换（停止播放/重启节目）。

这非常接近工作。谁可以帮我添加正确的东西，让它工作（简历）而不需要编写全新的代码？谢谢！

    <!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/ 在此先感谢您的帮助！

Answer 1

您似乎忘记切换active标志：

$('.pauseButton').click(function () {
    if (!active) interval = setInterval(intervalFunction, 4000);
    else clearInterval(interval);

    active = !active; // << MISSING BIT
});

无法让我的JavaScript暂停按钮恢复 - 如此接近完成

1 个答案: