懸停時啓動傳送帶

我想讓用戶將鼠標懸停在傳送帶上時啓動傳送帶。下面是我使用啓動傳送帶上的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"，但我不知道，我希望得到任何幫助它可能是由於。

來源

2016-05-12 Martin

請問你能提供一個jsfiddle嗎？ – davidbucka

@RoryMcCrossan我正在使用jQuery和Bootstrap – Martin

@Martin我還沒有在小提琴中測試過我的答案，但我認爲你需要一些邏輯來防止在每個圖像懸停中重新啓動傳送帶。 –

我不想要的是在每個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"; 
}); 
} 
});

來源

2016-05-12 08:24:04

這裏是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 
 
\t $(".left").click(function(){ 
 
    \t $("#myCarousel").carousel('prev'); 
 
    }); 
 
    $(".right").click(function(){ 
 
    \t $("#myCarousel").carousel('next'); 
 
    }); 
 
    
 
    // Enable carousel indicators 
 
    $(".slide-one").click(function(){ 
 
    \t $("#myCarousel").carousel(0); 
 
    }); 
 
    $(".slide-two").click(function(){ 
 
    \t $("#myCarousel").carousel(1); 
 
    }); 
 
    $(".slide-three").click(function(){ 
 
    \t $("#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{ 
 
\t margin: 20px; 
 
} 
 
</style> 
 
</head> 
 
<body> 
 
<div class="bs-example"> 
 
    <div id="myCarousel" class="carousel slide" data-interval="3000" data-ride="carousel"> 
 
    \t <!-- 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"> 
 
      \t \t <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>         \t \t

來源

2016-05-12 08:29:41

工作版本您靶向類myCarousel的（.myCarousel），而它在你的標記的ID。所以你需要將它改爲$('#myCarousel').carousel({ - 請注意＃

來源

2016-05-12 08:29:45

謝謝James！解決了它 – Martin

懸停時啓動傳送帶

回答

相關問題