2

这个想法是一个静态图像,但是等等……它不是一个静态图像,它只是一个不会移动的幻灯片,所以你认为它是一个静态图像。但是然后你将鼠标悬停在它上面,它就开始移动了!我在网上的几个地方看过它,很喜欢它的效果,但无法让引导程序模仿它。

我所有的搜索都会为试图让它在悬停时暂停的人提供结果(任何人都可以说文档......),但没有做相反的事情。无论如何,这是基本代码...

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
    })
});
4

1 回答 1

1

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

原来当鼠标进入时(mouseenter - 暂停滑动) 当鼠标离开时(mouseleave - 继续滑动)

只需更改 js/bootstrap.js 文件中的以下代码行以允许连续滑动。

.on('mouseenter', $.proxy(this. pause , this))

.on('mouseenter', $.proxy(this.cycle , this))

.on('mouseleave', $.proxy(this.cycle , this))

.on('mouseleave', $.proxy(this. pause , this))

于 2017-09-11T05:58:49.947 回答