Question

我通过“添加播放/暂停按钮来引导旋转木马”博客，很好。在那个博客中，它为我们提供了两个按钮（播放和暂停），但我需要通过一个按钮来控制它。这样我就可以在点击播放时添加暂停图标，反之亦然。

$(function () {
  $('#carousel').carousel({
    interval: 2000,
    pause: "false"
  });
  $('#playButton').click(function () {
    $('#carousel').carousel('cycle');
  });
  $('#pauseButton').click(function () {
    $('#carousel').carousel('pause');
  });
});

我刚添加了这个脚本。

Answer 1

您可以执行类似于在单击时添加类指定状态的操作。可能最终想整理一下，但是现在应该得到它

＆＃13;

$(function() {
  $('#carousel').carousel({
    interval: 2000,
    pause: "false"
  });

  $(document).on('click', '#playPauseBtn', function() {
    var $el = $(this);

    var isPlaying = $el.hasClass('isPlaying');
    var isPaused = $el.hasClass('isPaused');

    if (isPaused) {
      // we know it's paused, so play it
      $('#carousel').carousel('cycle');
      $el.removeClass('isPaused');
      $el.addClass('isPlaying');
    } else if (isPlaying) {
      // we know it's playing, so pause it
      $('#carousel').carousel('pause');
      $el.removeClass('isPlaying');
      $el.addClass('isPaused');
    }
  });
});

＆＃13;

<div id="playPauseBtn" class="isPaused"></div>

＆＃13;

Answer 2

我不知道哪些博客文章被引用，因为没有链接，但是vernak2539的解决方案对我来说似乎真的很啰嗦。为什么不在DOM中保持播放和暂停按钮，只是直观地切换它们。

在css中：

#playButton{display:none;}

在js中，在现有的play / pause.onclick函数中添加toggle（）行：

$('#playButton').click(function(){
    $('#playButton,#pauseButton').toggle();
    $('#homeCarousel').carousel('cycle');
});
$('#pauseButton').click(function(){
    $('#playButton,#pauseButton').toggle();
    $('#homeCarousel').carousel('pause');
});

我们如何用单个按钮控制自举旋转木马的播放/暂停

2 个答案: