我已经阅读了几乎关于引导转盘的所有线程，但还没有找到我的问题的答案。
我在旋转木马上添加了两个控制按钮（播放/暂停），但每个按钮都会从默认/第一张幻灯片中激活该功能。我希望能够在点击事件发生时暂停当前幻灯片并从当前幻灯片播放。
这是我的代码：
<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>
这应该是有效的。我确保您的点击事件按照您的预期触发，因为引导轮播的某些元素可能出现在您的元素上方并阻止点击。
如果您添加以下控件 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;
}
为了使这个功能最有意义，您可能希望旋转木马继续移动，即使悬停在它上面（否则在进行游戏选择后，直到您移动鼠标才会再次启动循环行为）。
根据 轮播文件：
选项 - 暂停
默认 - “悬停” - 在鼠标中心暂停旋转木马的循环，并在小鼠离开时恢复旋转木马的循环。
相反，请确保在初始化轮播时将其关闭，如下所示：
$('#homeCarousel').carousel({
interval:2000,
pause: "false"
});
这应该是有效的。我确保您的点击事件按照您的预期触发，因为引导轮播的某些元素可能出现在您的元素上方并阻止点击。
如果您添加以下控件 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;
}
为了使这个功能最有意义，您可能希望旋转木马继续移动，即使悬停在它上面（否则在进行游戏选择后，直到您移动鼠标才会再次启动循环行为）。
根据 轮播文件：
选项 - 暂停
默认 - “悬停” - 在鼠标中心暂停旋转木马的循环，并在小鼠离开时恢复旋转木马的循环。
相反，请确保在初始化轮播时将其关闭，如下所示：
$('#homeCarousel').carousel({
interval:2000,
pause: "false"
});
对于那些想要关闭播放/暂停按钮的人。
jsFiddle示例
使用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>
这是我的方法。你可以根据自己的需要设置.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>