twitter-bootstrap 将播放/暂停按钮添加到引导轮播
声明：本页面是StackOverFlow热门问题的中英对照翻译，遵循CC BY-SA 4.0协议，如果您需要使用它，必须同样遵循CC BY-SA许可，注明原文地址和作者信息，同时你必须将它归于原作者（不是我）：StackOverFlow
原文地址: http://stackoverflow.com/questions/20615100/
Warning: these are provided under cc-by-sa 4.0 license. You are free to use/share it, But you must attribute it to the original authors (not me):
StackOverFlow
Add Play/Pause button to bootstrap carousel
提问by Mojgan
I have read almost all the threads regarding to the bootstrap carousel, but haven't found an answer to my question. I have added two control buttons (play/pause) to the carousel, but each button fires the function from the default/first slide. I would like to be able to pause the current slide and play from the current slide whenever the click event happens.
我已经阅读了几乎所有关于 bootstrap carousel 的帖子，但还没有找到我的问题的答案。我在轮播中添加了两个控制按钮（播放/暂停），但每个按钮都会从默认/第一张幻灯片中触发该功能。我希望能够在单击事件发生时暂停当前幻灯片并从当前幻灯片播放。
Here is my code:
这是我的代码：
<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>
And the two controls:
和两个控件：
<!--Carousel controls -->
<button id="playButton">Play</button>
<button id="pauseButton">Pause</button>
回答by KyleMit
This should be working. I'd make sure that your click events are firing as you expect them to because some elements of the bootstrap carousel can appear above your elements and prevent clicks.
这应该有效。我会确保您的点击事件按您的预期触发，因为引导轮播的某些元素可以出现在您的元素上方并阻止点击。
If you add the following controls in HTML:
如果在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>
Then the following JavaScriptshould control starting and stopping on any frame:
然后下面的JavaScript应该控制在任何帧上的启动和停止：
$('#playButton').click(function () {
$('#homeCarousel').carousel('cycle');
});
$('#pauseButton').click(function () {
$('#homeCarousel').carousel('pause');
});
As related to my first point, to get them to appear properly within the carousel, you can style the button group with the following CSS:
与我的第一点相关，为了让它们在轮播中正确显示，您可以使用以下CSS设置按钮组的样式：
#carouselButtons {
margin-left: 100px;
position: absolute;
bottom: 0px;
}
Working Demo in jsFiddle
jsFiddle 中的工作演示
For this functionality to make the most sense, you probably want the carousel to continue moving, even when hovering over it (otherwise after the play selection is made, the cycling behavior won't start up again until you move the mouse).
为了使此功能最有意义，您可能希望轮播继续移动，即使将鼠标悬停在其上（否则在进行播放选择后，循环行为将不会再次启动，直到您移动鼠标）。
According to the carousel docs:
根据轮播文档：
Option- pause
Default- "hover" - Pauses the cycling of the carousel on mouseenter and resumes the cycling of the carousel on mouseleave.
选项- 暂停
默认- “悬停” - 在 mouseenter 上暂停轮播的循环并在 mouseleave 上恢复轮播的循环。
Instead, make sure you turn this off when you initialize the carousel like this:
相反，请确保在像这样初始化轮播时将其关闭：
$('#homeCarousel').carousel({
interval:2000,
pause: "false"
});
回答by Evan
This was my approach. You can style the .pause and .play class however you see fit, but I'm just using plain text for demo purposes:
这是我的方法。您可以随意设置 .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');
}
});
Here is your detonator
这是你的雷管
<a class="carousel-control pause" href="javascript:void(0);">Pause</a>
回答by Maria
For those who would like the play/pause buttons to switch off. jsFiddle example
对于那些想要关闭播放/暂停按钮的人。 jsFiddle 示例
Javascript:
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:
HTML：
<div id="carouselButtons">
<button id="pauseButton" type="button" class="btn btn-default btn-xs">
<span class="glyphicon glyphicon-pause"></span>
</button>
</div>
