Can'；不要让我的JavaScript暂停按钮继续-如此接近完成_Javascript_Jquery

Can'；不要让我的JavaScript暂停按钮继续-如此接近完成

javascript jquery

Can'；不要让我的JavaScript暂停按钮继续-如此接近完成,javascript,jquery,Javascript,Jquery,经过许多不同的代码，这是我最接近它的所有工作。每个按钮都可以工作（上一步、下一步和暂停），但我需要设置暂停按钮，以便在第二次单击后继续幻灯片放映。我不在乎幻灯片是否在它停止的地方继续，只要它继续。我也不想添加第四个（播放）按钮或暂停按钮更改为播放按钮，只需切换（停止播放/重新启动播放）这是如此接近工作。谁能帮我添加正确的东西，让它工作（简历），而不必写一个全新的代码？谢谢 <!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Transitio

经过许多不同的代码，这是我最接近它的所有工作。每个按钮都可以工作（上一步、下一步和暂停），但我需要设置暂停按钮，以便在第二次单击后继续幻灯片放映。我不在乎幻灯片是否在它停止的地方继续，只要它继续。我也不想添加第四个（播放）按钮或暂停按钮更改为播放按钮，只需切换（停止播放/重新启动播放）

这是如此接近工作。谁能帮我添加正确的东西，让它工作（简历），而不必写一个全新的代码？谢谢

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


无标题文件
$（函数（）{
$（'.fadein img:gt（））.hide（）；
var-active=true；
var interval=setInterval（intervalFunction，4000）；
$（'.pauseButton'）。单击（函数（）{
如果（！active）interval=setInterval（intervalFunction，4000）；
else清除间隔（interval）；
});
函数间隔函数（）{
$（'.fadein:first child'）.fadeOut（）
.next（'img'）.fadeIn（）
.end（）.appendTo（'.fadein'）；
}
});
$（函数（）{
$（'.fadein img:gt（0）'）.hide（）；
$（'.nextButton'）。在（'click'，函数（）{
$（'.fadein:first child'）.fadeOut（）
.next（'img'）.fadeIn（）
.end（）.appendTo（'.fadein'）；
});
$（'.previousButton'）。在（'click'，函数（）{
$（'.fadein:last child'）.fadein（）
.insertBefore（$（'.fadein:first child'）.fadeOut（））；
});
});
.fadein{位置：相对；宽度：450px；高度：275px；}
.fadein img{位置：绝对；左侧：0；顶部：0；}
#陈列柜{
宽度：530px；
高度：315px；}
#btn1{
浮动：左；
宽度：40px；
高度：80px；}
#展示{
浮动：左；
宽度：450px；
高度：275px；}
#btn2{
浮动：左；
宽度：40px；
高度：80px；}
#btn3{
宽度：80px；
高度：30px；}
.nextButton、.previousButton、.pauseButton{cursor:pointer}
.内容{
颜色：#443e33；
线高：150%；
}

以下是JSFIDLE：

提前感谢您的帮助

您似乎忘记了切换

活动

标志：

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

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

$（'.pauseButton'）。单击（函数（）{
如果（！active）interval=setInterval（intervalFunction，4000）；
else清除间隔（interval）；
active=！active；//您似乎忘记了切换active
标志：
$('.pauseButton').click(function () {
    if (!active) interval = setInterval(intervalFunction, 4000);
    else clearInterval(interval);

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

$（'.pauseButton'）。单击（函数（）{
如果（！active）interval=setInterval（intervalFunction，4000）；
else清除间隔（interval）；
active=！active；//不太难：对这一个的小偏好：更新了图片，jQuery实际选中了：我看不出你在哪里将active设置为false。@Jamiec，谢谢你的dummyimage链接。我不知道它的存在。我正在处理它，但你比我快得多。再次感谢！我会把它保存到下一个ti我。其实没那么难：对这一个的小偏好：更新了fiddle with images，而jQuery实际选中了：我看不出你在哪里将active设置为false。@Jamiec，感谢dummyimage链接。我不知道它的存在。我正在处理它，但你比我快得多。再次感谢！我会把它保存到下次。成功了！Thanks rixo！我昨天在那里看到了它，但显然我遗漏了一个分号。因此，在你的回答&我了解了JSFIDLE以及它将如何清理代码这一事实之间，我终于成功了！你们都很棒！再次感谢！成功了！谢谢rixo！我昨天在那里看到了它，但显然我遗漏了一个分号c所以，在你的回答和我学习了JSFIDLE以及它将如何清理代码的事实之间，我终于成功了！你们都很棒！再次感谢！