javascript - 如何用单个按钮控制 Bootstrap 轮播的播放/暂停

Question

我浏览了“向 Bootstrap 轮播添加播放/暂停按钮”博客，没问题。在该博客中它为我们提供了两个按钮(播放和暂停)，但我需要通过一个按钮来控制它。这样我就可以在点击播放时添加暂停图标，反之亦然。

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

我刚刚添加了这个脚本。

Answer 1

您可以执行一些操作，例如添加单击时指定状态的类。最终可能想要整理一下，但现在应该可以了

$(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');
    }
  });
});

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