Question

我已经找到了一些问题/答案，但是我很难搞清楚答案并将它们应用到我自己的Cycle幻灯片中。我设法找到以下解决方案，它似乎是迄今为止我发现的最简单的解决方案：

<button id="pauseToggle">Pause</button>

$('#pauseToggle').click(function() {
    var slideshow = $( '.cycle-slideshow' );
    if ( slideshow.is( '.cycle-paused' ) ) {
    slideshow.cycle( 'resume' );
    $(this).text( 'Pause' );
    }
    else {
        slideshow.cycle( 'pause' );
        $(this).text( 'Play' );
    }
);

但我不能100％理解什么是什么。我知道第一部分是实际按钮，并且放在按钮显示在页面上的位置，然后我也看到按钮的id引用，但我不确定还有什么。我理解if和else语句的基本思想，我可以看看发生了什么，但就参考和标签而言，我真的只需知道它们的用途。我不需要详细的解释，只需简短而简洁的总结如下：

var slideshow
.cycle-幻灯片
.cycle-暂停
slideshow.cycle

有了这个，我可以肯定地解决这个问题，即使我必须回到谷歌，我也会更好地了解我在谷歌上搜索的内容：）

非常感谢！

Answer 1

我设法通过做一些乏味的谷歌搜索来解决这个问题，所以我将在这里添加解决方案以帮助其他人......

我发现的解决方案不是if，else语句，而是适当地隐藏了播放按钮和暂停按钮。

 $('#bannernav').click(function() {
      $('#promobanner').cycle('pause');
      $('#play').show();
      $('#pause').hide();
 });

我的幻灯片的ID是'#promobanner'，而'#bannernav'的ID是寻呼机链接。如果点击任何寻呼机链接，此位会导致幻灯片显示暂停，然后显示“#play”的ID，同时隐藏“#pause”的ID。我实际上试图在'#bannernav'中定位锚标签，但它不会以这种方式工作。我不确定为什么它不起作用，但这个解决方案不会导致任何我能预见到的问题。然后我为“右”和“左”导航链接做了完全相同的事情，这样如果你点击“下一张幻灯片”或“上一张幻灯片”它也会暂停并隐藏暂停按钮。

$('#play').hide();

这会设置它，以便最初隐藏'#play'id。

$('#play').click( function(e){
      $('#promobanner').cycle('resume');
      $('#play').hide();
      $('#pause').show();
  });

此部分定义了当您点击'#play'的ID时会发生什么。它将使用id“#promobanner”恢复幻灯片放映，然后隐藏ID，“＃play”但显示id，“＃abuse”。现在，随着幻灯片放映的恢复，暂停按钮是唯一显示的按钮。

 $('#pause').click( function(e){
      $('#promobanner').cycle('pause');
      $('#play').show();
      $('#pause').hide();
  });

最后，这部分定义了当你点击'#pause'的id时会发生什么。它将暂停幻灯片放映时使用id，'＃promobanner'，然后隐藏id，'＃abuse'但显示id，'＃play'。幻灯片显示将暂停，播放按钮是唯一显示的按钮。

我希望这可以帮助别人。这不是我正在寻找的解决方案，但似乎可以做到这一点！：）

Jquery循环插件暂停/恢复切换？

1 个答案: