悬停时启动轮播答案

【问题标题】：Starting carousel on hover悬停时启动轮播
【发布时间】：2016-05-12 08:11:20
【问题描述】：

当用户将鼠标悬停在轮播上时，我正在尝试启动轮播。下面是我用来启动轮播的 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" 但我不确定，我将不胜感激。

【问题讨论】：

你能提供一个jsfiddle吗？
@RoryMcCrossan 我正在使用 jQuery 和 Bootstrap
@Martin 我没有在小提琴中测试我的答案，但我认为你需要一些逻辑来防止轮播在每个图像悬停时重新启动。
@PeterDarmis 我目前遇到的困难是当用户将鼠标悬停在图像上时才启动轮播动画

标签： javascript jquery twitter-bootstrap carousel

【解决方案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";
});
}
});

【讨论】：

【解决方案2】：

您的目标是一类 myCarousel (.myCarousel)，而它是您的标记中的一个 ID。所以你需要把它改成$('#myCarousel').carousel({ - 注意#

【讨论】：

【解决方案3】：

这是carousel的工作版本

<!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>

【讨论】：