Warning: file_get_contents(/data/phpspider/zhask/data//catemap/9/javascript/418.json): failed to open stream: No such file or directory in /data/phpspider/zhask/libs/function.php on line 167

Warning: Invalid argument supplied for foreach() in /data/phpspider/zhask/libs/tag.function.php on line 1116

Notice: Undefined index: in /data/phpspider/zhask/libs/function.php on line 180

Warning: array_chunk() expects parameter 1 to be array, null given in /data/phpspider/zhask/libs/function.php on line 181
Javascript 悬停时启动旋转木马_Javascript_Jquery_Twitter Bootstrap_Carousel - Fatal编程技术网

Javascript 悬停时启动旋转木马

Javascript 悬停时启动旋转木马,javascript,jquery,twitter-bootstrap,carousel,Javascript,Jquery,Twitter Bootstrap,Carousel,当用户将鼠标悬停在转盘上时,我正试图启动转盘。下面是我用来启动旋转木马的Javascript: function onHover() { $('.myCarousel').carousel({ interval: 2000 }) } 下面是我调用函数onHover的HTML代码 <div id="myCarousel" class="carousel slide"> <!-- Indicators --> <ol c

当用户将鼠标悬停在转盘上时,我正试图启动转盘。下面是我用来启动旋转木马的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>

  • 标题3 这是一个测试

    我不确定哪里出了问题,我想这可能是因为设置了类
    “class=“carousel slide”
    ,但我不确定,我会感谢任何帮助。

    我不希望在每次img悬停时都重新启动carousel,所以尝试这样做

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

    这是
    carousel

    
    通过JavaScript激活Bootstrap 3旋转木马
    $(文档).ready(函数(){
    //启动旋转木马
    $(“#myCarousel”).carousel();
    //启用转盘控制
    $(“.left”)。单击(函数(){
    $(“#myCarousel”).carousel('prev');
    });
    $(“.right”)。单击(函数(){
    $(“#myCarousel”).carousel('next');
    });
    //启用转盘指示器
    $(“.slide one”)。单击(函数(){
    $(“我的旋转木马”)。旋转木马(0);
    });
    $(“.slide two”)。单击(函数(){
    $(“我的旋转木马”)。旋转木马(1);
    });
    $(“.slide third”)。单击(函数(){
    $(“我的旋转木马”)。旋转木马(2);
    });
    });
    旋转木马{
    背景:#2f4357;
    边缘顶部:20px;
    }
    .carousel.项目img{
    边距:0自动;/*将幻灯片图像水平居中对齐*/
    }
    .bs示例{
    利润率:20px;
    }
    
  • 第一张幻灯片标签 Lorem ipsum dolor sit amet,是一位杰出的献身者

    第二张幻灯片标签 Lorem ipsum dolor sit amet,是一位杰出的献身者

    第三张幻灯片标签 这是一个伟大的共产主义者


    您的目标是myCarousel类(
    .myCarousel
    ),而它是标记中的一个ID。因此您需要将其更改为
    $(“#myCarousel”).carousel({
    -请注意#

    您能提供一个JSFIDLE吗?@Rorymcrossan我正在使用jQuery和Bootstrap@Martin我还没有用小提琴测试我的答案,但我认为你需要一些逻辑来防止旋转木马在每次图像悬停时重新启动。@PeterDarmis我现在遇到的困难是当user将鼠标悬停在图像上方