7

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

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

<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">‹&lt;/a>
<a class="carousel-control right" href="#myCarousel" data-slide="next">›&lt;/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>

似乎一旦最初调用了轮播（并设置了间隔），您就无法更改该间隔或轮播行为。

任何见解都会很棒。

4

3 回答 3

16

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

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

所以你的暂停/循环代码看起来像：

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

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

工作演示

于 2013-08-09T15:33:12.133 回答
0

这就是您暂停轮播的方式

$("#myCarousel").carousel('pause');
于 2013-08-09T15:35:20.143 回答
0

天哪，我认为以正确的方式初始化轮播会更好....

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

看到这个

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

问候祖米

于 2013-11-01T09:24:49.270 回答