将播放/暂停按钮添加到引导轮播

Question

我已经阅读了几乎所有关于引导轮播的帖子，但还没有找到我的问题的答案。 我在轮播中添加了两个控制按钮（播放/暂停），但每个按钮都会触发默认/第一张幻灯片的功能。我希望能够在点击事件发生时暂停当前幻灯片并从当前幻灯片播放。

这是我的代码：

<script src="/_catalogs/masterpage/UHN/js/bootstrap.min.js"></script>
<script>
    $(function () {
        $('.carousel').carousel({ interval:6000 });  

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

</script>

还有两个控件：

<!--Carousel controls -->
<button id="playButton">Play</button>
<button id="pauseButton">Pause</button>

Answer 1

这应该可以工作。我会确保您的点击事件按照您的预期触发，因为引导轮播的某些元素可能会出现在您的元素上方并阻止点击。

如果您在 HTML 中添加以下控件：

<div id="carouselButtons">
    <button id="playButton" type="button" class="btn btn-default btn-xs">
        <span class="glyphicon glyphicon-play"></span>
     </button>
    <button id="pauseButton" type="button" class="btn btn-default btn-xs">
        <span class="glyphicon glyphicon-pause"></span>
    </button>
</div>

那么下面的 JavaScript 应该控制任何帧的开始和停止：

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

关于我的第一点，为了让它们在轮播中正确显示，您可以使用以下 CSS 设置按钮组的样式：

#carouselButtons {
    margin-left: 100px;
    position: absolute;
    bottom: 0px;
}

Working Demo in jsFiddle

要使此功能最有意义，您可能希望轮播继续移动，即使将鼠标悬停在它上面（否则在进行播放选择后，直到您移动鼠标，循环行为才会再次开始） .

根据carousel docs：

选项 - 暂停
默认 - “悬停” - 在 mouseenter 上暂停轮播并在 mouseleave 上恢复轮播。

相反，请确保在初始化轮播时将其关闭，如下所示：

$('#homeCarousel').carousel({
    interval:2000,
    pause: "false"
});

Answer 2

这是我的方法。您可以设置 .pause 和 .play 类的样式，但您认为合适，但我只是出于演示目的使用纯文本：

$('.carousel-control.pause').click(function() {
        var controls = $(this);
        if (controls.hasClass('pause')) {
            controls.text('Resume').removeClass('pause').toggleClass('play');
            $('#myCarousel').carousel('pause');
        } else {
            controls.text('Pause').removeClass('play').toggleClass('pause');
            $('#myCarousel').carousel('cycle');
        }
    });

这是你的雷管

<a class="carousel-control pause" href="javascript:void(0);">Pause</a>

Answer 3

对于希望关闭播放/暂停按钮的用户。 jsFiddle example

Javascript：

 $("button").click(function() {
  if ($(this).attr("id") === "pauseButton") {
    $('#homeCarousel').carousel('pause');
    $(this).attr("id", "playButton");
    $("span", this).toggleClass("glyphicon-play glyphicon-pause");
  } else {
    $('#homeCarousel').carousel('cycle');
    $(this).attr("id", "pauseButton");
    $("span", this).toggleClass("glyphicon-pause glyphicon-play");
  }
});

HTML：

<div id="carouselButtons">
    <button id="pauseButton" type="button" class="btn btn-default btn-xs">
      <span class="glyphicon glyphicon-pause"></span>
    </button>
  </div>