jQuery 如何在输入焦点上暂停 Bootstrap 轮播
声明：本页面是StackOverFlow热门问题的中英对照翻译，遵循CC BY-SA 4.0协议，如果您需要使用它，必须同样遵循CC BY-SA许可，注明原文地址和作者信息，同时你必须将它归于原作者（不是我）：StackOverFlow
原文地址: http://stackoverflow.com/questions/18150302/
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
How to pause Bootstrap carousel on input focus
提问by dazziola
I have a Bootstrap carousel which contains a simple form. You can set the carousel to pause when hovered upon. However if the cursor leaves the Carousel area while typing within inputs, the carousel reverts back to its default cycle and interval of 5000ms.
我有一个包含简单表单的 Bootstrap 轮播。您可以将轮播设置为在悬停时暂停。但是，如果光标在输入中键入时离开轮播区域，轮播将恢复为其默认周期和 5000 毫秒的间隔。
I am looking to set it to remain paused during input focus and restart cycle on input focusout.
我希望将其设置为在输入焦点期间保持暂停状态，并在输入焦点输出时重新启动循环。
<div id="myCarousel" class="carousel slide">
<div class="carousel-inner">
<div id="slide1" class="item">
This is a test slide.
</div>
<div id="slide2" class="item" >
<input type="text" placeholder="name" name="full_name" />
</div>
</div>
<!-- Carousel nav -->
<a class="carousel-control left" href="#myCarousel" data-slide="prev">?</a>
<a class="carousel-control right" href="#myCarousel" data-slide="next">?</a>
</div>
<script>
!function ($) {
$(function(){
$('#myCarousel.slide').carousel({
interval: 5000,
pause: "hover"
})
})
}(window.jQuery)
$('input').focus(function(){
$("#myCarousel").pause()
}) /* Will worry about restarting carousel on mouseout if I could get this pause working */
</script>
It appears that once a carousel has been initially called (and an interval set) you cannot alter that interval or carousel behaviour.
似乎一旦最初调用了轮播（和设置了间隔），您就无法更改该间隔或轮播行为。
Any insights would be great.
任何见解都会很棒。
回答by cfs
You'll need to call the pause function like this: $("#myCarousel").carousel('pause');. This is how all methods are called on bootstrap components, following the jQuery UI convention.
你需要这样调用暂停功能：$("#myCarousel").carousel('pause');。这是在引导组件上调用所有方法的方式，遵循 jQuery UI 约定。
You can restart the carousel by listening to the blurevent then calling the cyclemethod. You'll also need to move your event handlers inside the $(function() {...});wrapper. This ensures all the DOM elements are present and ready to be manipulated.
您可以通过侦听blur事件然后调用该cycle方法来重新启动轮播。您还需要将事件处理程序移动到$(function() {...});包装器内。这确保所有 DOM 元素都存在并准备好进行操作。
So your pausing/cycling code would look like:
所以你的暂停/循环代码看起来像：
$(function(){
$('#myCarousel.slide').carousel({
interval: 5000,
pause: "hover"
});
$('input').focus(function(){
$("#myCarousel").carousel('pause');
}).blur(function() {
$("#myCarousel").carousel('cycle');
});
});
回答by Schmalzy
This is how you pause a carousel
这就是您暂停轮播的方式
$("#myCarousel").carousel('pause');
回答by zumi
omg, i think it would be better to init carousel the right way....
天哪，我认为以正确的方式初始化轮播会更好......
on hover dont let them pause and on mouseleave pause object!
悬停时不要让他们暂停，鼠标离开时不要让暂停对象！
see this
看到这个
$( ".carousel" ).hover(
function() {
$( "#"+this.id ).carousel({
interval: 2000,
//pause: 'hover'
pause: 'none' // disable default option "pause on hover" and set it to none
});
}, function() {
$( "#"+this.id ).carousel('pause'); // to set it manually on a spezific carousel id
}
);
Greetz zumi
格雷茨·祖米
