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 slide"但是我不确定，我会感激任何帮助。

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

Answer 2

您正在定位myCarousel（.myCarousel）类，而它是您标记中的ID。因此您需要将其更改为$('#myCarousel').carousel({ - 请注意＃

Answer 3

以下是carousel

的工作版本

＆＃13;

<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
<title>Activate Bootstrap 3 Carousel via JavaScript</title>
<link rel="stylesheet" href="https://maxcdn.bootstrapcdn.com/bootstrap/3.3.6/css/bootstrap.min.css">
<link rel="stylesheet" href="https://maxcdn.bootstrapcdn.com/bootstrap/3.3.6/css/bootstrap-theme.min.css">
<script src="https://ajax.googleapis.com/ajax/libs/jquery/1.11.3/jquery.min.js"></script>
<script src="https://maxcdn.bootstrapcdn.com/bootstrap/3.3.6/js/bootstrap.min.js"></script>
<script type="text/javascript">
$(document).ready(function(){
    // Activate carousel
    $("#myCarousel").carousel();
    
    // Enable carousel control
	$(".left").click(function(){
    	$("#myCarousel").carousel('prev');
    });
    $(".right").click(function(){
    	$("#myCarousel").carousel('next');
    });
    
    // Enable carousel indicators
    $(".slide-one").click(function(){
    	$("#myCarousel").carousel(0);
    });
    $(".slide-two").click(function(){
    	$("#myCarousel").carousel(1);
    });
    $(".slide-three").click(function(){
    	$("#myCarousel").carousel(2);
    });
});
</script>
<style type="text/css">
.carousel{
    background: #2f4357;
    margin-top: 20px;
}
.carousel .item img{
    margin: 0 auto; /* Align slide image horizontally center */
}
.bs-example{
	margin: 20px;
}
</style>
</head>
<body>
<div class="bs-example">
    <div id="myCarousel" class="carousel slide" data-interval="3000" data-ride="carousel">
    	<!-- Carousel indicators -->
        <ol class="carousel-indicators">
            <li class="slide-one active"></li>
            <li class="slide-two"></li>
            <li class="slide-three"></li>
        </ol>   
        <!-- Wrapper for carousel items -->
        <div class="carousel-inner">
            <div class="active item">
                <img src="../images/slide1.png" alt="First Slide">
         		<div class="carousel-caption">
                  <h3>First slide label</h3>
                  <p>Lorem ipsum dolor sit amet, consectetur adipiscing elit.</p>
                </div>
            </div>
            <div class="item">
                <img src="http://images.nymag.com/images/2/daily/2008/12/20081203_google_250x250.jpg" alt="Second Slide">
                <div class="carousel-caption">
                  <h3>Second slide label</h3>
                  <p>Lorem ipsum dolor sit amet, consectetur adipiscing elit.</p>
                </div>
            </div>
            <div class="item">
                <img src="http://www.cestlaviebistro.com/wp-content/uploads/2014/04/Google-Plus-Logo-250x250.png" alt="Third Slide">
                <div class="carousel-caption">
                  <h3>Third slide label</h3>
                  <p>Praesent commodo cursus magna, vel scelerisque nisl consectetur.</p>
                </div>
            </div>
        </div>
        <!-- Carousel controls -->
        <a class="carousel-control left">
            <span class="glyphicon glyphicon-chevron-left"></span>
        </a>
        <a class="carousel-control right">
            <span class="glyphicon glyphicon-chevron-right"></span>
        </a>
    </div>
</div>
</body>
</html>

＆＃13;

在悬停时开始旋转木马

3 个答案: