文章/答案/技术大牛

发布

社区首页 >问答首页 >如何在输入焦点上暂停Bootstrap轮播

问如何在输入焦点上暂停Bootstrap轮播
EN

Stack Overflow用户

提问于 2013-08-09 23:26:53

回答 3查看 26.5K关注 0票数 6

我有一个Bootstrap旋转木马，其中包含一个简单的表单。您可以将旋转木马设置为在悬停时暂停。但是，如果光标在输入中键入时离开旋转木马区域，则旋转木马将恢复到其默认周期和5000ms的间隔。

我希望将它设置为在输入焦点期间保持暂停，并在输入焦点输出时重新启动循环。

<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>

似乎一旦轮播被初始调用(和间隔设置)，您就不能改变该间隔或轮播行为。

任何真知灼见都会很棒。

twitter-bootstrap

carousel

javascript

jquery

回答 3

Stack Overflow用户

回答已采纳

发布于 2013-08-09 23:33:12

您需要像这样调用pause函数：$("#myCarousel").carousel('pause');。这就是在引导组件上调用所有方法的方式，遵循jQuery UI约定。

您可以通过侦听blur事件，然后调用cycle方法来重新启动carousel。您还需要在$(function() {...});包装器中移动事件处理程序。这确保了所有的DOM元素都存在并准备好被操作。

因此，您的暂停/循环代码将如下所示：

$(function(){
    $('#myCarousel.slide').carousel({
        interval: 5000,
        pause: "hover"
    });

    $('input').focus(function(){
       $("#myCarousel").carousel('pause');
    }).blur(function() {
       $("#myCarousel").carousel('cycle');
    });
});

票数 15

Stack Overflow用户

发布于 2013-08-09 23:35:20

这就是暂停旋转木马的方式

$("#myCarousel").carousel('pause');

票数 0

Stack Overflow用户

发布于 2013-11-01 17:24:49

天哪，我想最好是以正确的方式初始化轮播……

在鼠标悬停时，不要让它们暂停，在鼠标离开时，保留暂停对象！

看看这个

    $( ".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

票数 0

页面原文内容由Stack Overflow提供。腾讯云小微IT领域专用引擎提供翻译支持

原文链接：

https://stackoverflow.com/questions/18150302

复制

相似问题

问如何在输入焦点上暂停Bootstrap轮播
EN

回答 3

Stack Overflow用户

Stack Overflow用户

Stack Overflow用户

社区

活动

圈层

关于

腾讯云开发者

热门产品

热门推荐

更多推荐

问如何在输入焦点上暂停Bootstrap轮播EN

回答 3

Stack Overflow用户

Stack Overflow用户

Stack Overflow用户

社区

活动

圈层

关于

腾讯云开发者

热门产品

热门推荐

更多推荐

问如何在输入焦点上暂停Bootstrap轮播
EN