向我的图像幻灯片添加切换暂停/播放功能答案

【问题标题】：Adding a toggling pause/play function to my image slideshow向我的图像幻灯片添加切换暂停/播放功能
【发布时间】：2014-03-03 03:25:05
【问题描述】：

我对此非常陌生。我找到了一些简单幻灯片的脚本。同一张海报提供了更多脚本，可以在他的脚本中添加上一个和下一个按钮。这一切都很好，我喜欢它。但是我想添加一个暂停按钮，该按钮将在单击时停止幻灯片放映，并在再次单击时重新启动它。我对按钮更改的外观不感兴趣，只想切换功能。我创建了我的按钮并将其放置在我想要的位置，它在 div 中称为“pauseButton”。我没有使用任何特定的“插件”，如“Cycle”，只是普通的 jquery（我猜）。我花了 4 天的时间在网上寻找答案，虽然有些例子可能有效，但我不够聪明，不知道如何调整它以适应我的脚本。我只需要知道到底要添加什么（以及在哪里）使它起作用：

<script type="text/javascript" src="../js/jquery.js"></script>
<script type="text/javascript">
$(function(){
  var flag = true;
  $('.fadein img:gt(0)').hide();
  setInterval(function(){
  if(flag){ 
  $('.fadein :first-child').fadeOut()
    .next('img').fadeIn()
    .end().appendTo('.fadein');}, 
  3000);
 }
});
    $(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());
        });
    $('.pauseButton').click(function(){
         flag = !flag;   
        });
});
</script>

这是整个页面：

    <!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>Thirteen Pine</title>

<script type="text/javascript" src="../js/jquery.js"></script>
<script type="text/javascript">
$(function(){
  var flag = true;         
  $('.fadein img:gt(0)').hide();
  setInterval(function(){
  if(flag){                    
    $('.fadein :first-child').fadeOut()
        .next('img').fadeIn()
        .end().appendTo('.fadein');}, 
    3000);
  }
});
    $(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());
        });
         $('.pauseButton').click(function(){
             flag = !flag;
        });

});
</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 }

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

【问题讨论】：

欢迎来到 Stack Overflow。请edit您的问题并添加一些 HTML 来构建一个工作示例。您还可以提供指向jsfiddle 的链接。
我发现分享这个代码的发帖人已经一年多没上线了，所以不能随便问他怎么办。无论如何，他似乎对写剧本还很陌生。我将不胜感激任何帮助！谢谢！
发布 HTML 标记！我猜您在某处使用 HTML 代码...您的评论与@simbabque 之前的评论有何关联？！

标签： jquery

【解决方案1】：

你可以添加一个标志变量，如果它是真的，只在你的setInterval回调中执行主代码：

$(function(){
  var flag = true;
  $('.fadein img:gt(0)').hide();
  setInterval(function(){
  if(flag){
     $('.fadein :first-child').fadeOut()
       .next('img').fadeIn()
       .end().appendTo('.fadein');}, 
     3000);
  }
});

然后将单击处理程序绑定到切换标志的暂停按钮：

$('#my-button').click(function(){
    flag = !flag;
});

【讨论】：

看起来简单高效+1
我打算提出同样的建议，但想等待一个可行的例子。
@simbabque 我不怪你，但我在机场真的很无聊:)
我编辑了我的问题并包含了您给我的建议。我把它们放在我认为它们去的地方，但它没有用。它只是让幻灯片从最后一张照片开始并停留在那里。我还包括了整个页面，因为有人想要 html。我之前的评论不是对 simbabque 的回应，当我只是提供有关为什么我没有去找写我正在使用的东西的人的信息时，我没有意识到那里有评论。请记住，我很愚蠢，我很幸运我的幻灯片能正常工作。我连js都看不懂，以前也没有在这个网站发过帖子。