javascript - 悬停时启动轮播

Question

我试图让我的轮播在用户将鼠标悬停在其上时启动。下面是我用来启动轮播的 JavaScript:

function onHover() {
    $('.myCarousel').carousel({
        interval: 2000
    })
}

这是我调用函数 onHover 的 HTML 代码。

<div id="myCarousel" class="carousel slide">
    <!-- Indicators -->
    <ol class="carousel-indicators">
        <li data-target="#myCarousel" data-slide-to="0" class="active"></li>
        <li data-target="#myCarousel" data-slide-to="1"></li>
        <li data-target="#myCarousel" data-slide-to="2"></li>
    </ol>

    <!-- Wrapper for slides -->
    <div class="carousel-inner" role="listbox">
        <div class="item active">
            <div class="container">
                <h3>Heading 3</h3>
                <h1 class="col-md-9">This is a test</h1>
            </div>
            <img src="image.jpg" onmouseover="onHover();" />
        </div>

我不确定这里哪里出了问题，我认为这可能是由于设置的类“class =“carousel slip”但我不确定，我将不胜感激任何帮助.

Answer 1

我不希望在每次img悬停时重新启动轮播，所以尝试做这样的事情。

var carouselStart = "stopped";
var imgs = $(".carousel-inner").find("img");

$.each(imgs,function(i,v) {
if(carouselStart=="stopped") {
$(v).on('mouseover',function() {
$('.myCarousel').carousel({
        interval: 2000
    });
carouselStart = "started";
});
}
});