Question

这个想法是一个静态图像，但等等......它不是一个静态图像，它只是一个不移动的幻灯片，所以你认为它是一个静态图像。但是你将鼠标悬停在它上面，它开始移动！我已经在网上看到了一些地方并且非常喜欢它的效果，但是无法通过引导来模仿它。

我的所有搜索结果都会让人们试图让它在悬停时暂停（有人可以说文档......），但没有做相反的事情。无论如何，这里是基本代码......

HTML~一个非常精简的幻灯片

<div class="carousel slide" data-ride="carousel">
    <!-- Wrapper for slides -->
    <div class="carousel-inner" role="listbox">
        <div class="item active">
            <img src="images/image1.jpg" alt="Image one">
        </div>
        <div class="item ">
            <img src="images/image2.jpg" alt="Image two">
        </div>
    </div>
</div>

这是JS

$('.carousel').carousel({
        interval: false, //disable auto scrolling
        pause: false     //prevent pause on hover... we want the opposite
    });

//now I try to change the interval on hover
$('.carousel').hover(function(){
    $(this).carousel({
        interval:1000
    })
});

Answer 1

这种循环和暂停取决于两件事。

最初鼠标进入时（mouseenter - 暂停滑动）鼠标离开时（mouseleave - 恢复滑动）

只需更改js / bootstrap.js文件中的以下代码行即可继续滑动。

.on（＆＃39; mouseenter＆＃39;，$ .proxy（此。暂停，此））到

.on（＆＃39; mouseenter＆＃39;，$ .proxy（此。周期，这个））

并且

.on（＆＃39; mouseleave＆＃39;，$ .proxy（this。 cycle ，this）） to

.on（＆＃39; mouseleave＆＃39;，$ .proxy（此。暂停，这个））

Bootstrap Carousel过渡ON仅限悬停

1 个答案: