twitter-bootstrap - 使用JQuery事件执行 Bootstrap 幻灯片操作后,显示文本

  显示原文与译文双语对照的内容
55 0

我试图使一个链接显示在幻灯片动作完成后,每个图像( 我有三个幻灯片) 完成幻灯片动作。 我正在尝试使用 slid.bs.carousel 方法,但它不工作。 下面是我使用的JQuery,请告诉我如果你有任何建议- 包含 carousel的div是 #sticksCarousel ( 而不是默认的'#mycarousel"


$('#sticksCarousel').on('slid.bs.carousel', function() {
alert("BALLS");
});

谢谢!

编辑:这是我为 carousel 所拥有的HTML 。


<div class="row imgSlider"> 
<div class="col-md-10 col-md-offset-1 imgSlider">
<div id="sticksCarousel" class="carousel slide">
<ol class="carousel-indicators">
<li data-target="#sticksCarousel" data-slide-to="0" class="active"></li>
<li data-target="#sticksCarousel" data-slide-to="1"></li>
<li data-target="#sticksCarousel" data-slide-to="2"></li>
</ol>
<section class="carousel-inner">
<div class="item active"><img src="img/slide1.png" alt="blah" style="width:100%;"></div>
<div class="item"><img src="img/slide2.png" alt="blah" style="width:100%;"></div>
<div class="item"><img src="img/slide3.png" alt="blah" style="width:100%;"></div>
</section><!--carousel-inner-->
<a href="#sticksCarousel" class="left carousel-control" data-slide="prev"><span class="glyphicon glyphicon-chevron-left"> </span></a> <a href="#sticksCarousel" class="right carousel-control" data-slide="next"><span class="glyphicon glyphicon-chevron-right"></span> </a>
</div><!--sticksCarousel-->
<p id="sticksCarouselMessage">HEY!</p>
</div>
</div> 
<script type="text/javascript">
$('.carousel').carousel({
interval: 4000 })
$('#sticksCarousel').on('slid.bs.carousel', function() { alert("BALLS"); });
</script> 

基本上我要做的就是在每次 carousel 幻灯片操作完成时,在,'stickscarouselmessage'下进行修改,现在就设置为'嘿嘿'。 我正在使用javascript警报函数,看看 Bootstrap 方法 slid.bs.carousel 是否在我的网站上工作,它现在不是。

更新:

这里是我对所有HTML内容所做的更改。 它仍然不能正常工作


<!DOCTYPE html PUBLIC"-//W3C//DTD XHTML 1.0 Transitional//EN""http://www.w3.org/TR/xhtml1/DTD/xhtml1-transitional.dtd">
<html xmlns="http://www.w3.org/1999/xhtml">
<head>
<meta http-equiv="Content-Type" content="text/html; charset=UTF-8"/>
<title>Untitled Document</title> 
<link href="css/bootstrap.css" rel="stylesheet"/>
<link href="css/bootstrap-responsive.css" rel="stylesheet"/>
<link href="css/lightbox.css" rel="stylesheet"/>
<style>
body {
background:url(img/body_bg.png) repeat;
}
.sticksNav {
height:70px;
}
.headerImg{
margin-bottom:20px;
}

</style>
<script type="text/javascript">
$(document ).ready.(function() { 
$('.carousel').carousel({
interval: 4000 });
$('#sticksCarousel').on('slid.bs.carousel', function() { 
$("#sticksCarouselMessage").text("It worked!");
});
});
</script> 
</head>
<div class="container">
<div class="row header">
 <div class="col-md-10 col-md-offset-1">
 <div class="headerImg">
 <img src="img/header_img.png" style="width:100%; height:auto;">
 </div>
 <div class="navbar navbar-default">
 <div class="navbar-header">
 <button type="button" class="navbar-toggle" data-toggle="collapse" data-target=".navbar-collapse">
 <span class="icon-bar"></span>
 <span class="icon-bar"></span>
 <span class="icon-bar"></span>
 </button>
 <a class="navbar-brand" href="#">Project name</a>
 </div>
 <div class="navbar-collapse collapse">
 <ul class="nav navbar-nav">
 <li class="active"><a href="#">Link</a></li>
 <li><a href="#">Link</a></li>
 <li><a href="#">Link</a></li>
 <li class="dropdown">
 <a href="#" class="dropdown-toggle" data-toggle="dropdown">Dropdown <b class="caret"></b></a>
 <ul class="dropdown-menu">
 <li><a href="#">Action</a></li>
 <li><a href="#">Another action</a></li>
 <li><a href="#">Something else here</a></li>
 <li class="divider"></li>
 <li class="dropdown-header">Nav header</li>
 <li><a href="#">Separated link</a></li>
 <li><a href="#">One more separated link</a></li>
 </ul>
 </li>
 </ul>
 </div><!--/.nav-collapse -->
 </div>


</div><!--End Header-->
<div class="row imgSlider"> 
<div class="col-md-10 col-md-offset-1 imgSlider">
<div id="sticksCarousel" class="carousel slide">
<ol class="carousel-indicators">
<li data-target="#sticksCarousel" data-slide-to="0" class="active"></li>
<li data-target="#sticksCarousel" data-slide-to="1"></li>
<li data-target="#sticksCarousel" data-slide-to="2"></li>
</ol>
<section class="carousel-inner">
<div class="item active"><img src="img/slide1.png" alt="blah" style="width:100%;"></div>
<div class="item"><img src="img/slide2.png" alt="blah" style="width:100%;"></div>
<div class="item"><img src="img/slide3.png" alt="blah" style="width:100%;"></div>
</section><!--carousel-inner-->
<a href="#sticksCarousel" class="left carousel-control" data-slide="prev"><span class="glyphicon glyphicon-chevron-left"> </span></a> <a href="#sticksCarousel" class="right carousel-control" data-slide="next"><span class="glyphicon glyphicon-chevron-right"></span> </a>
</div><!--sticksCarousel-->
<p id="sticksCarouselMessage">HEY!</p>
</div>
</div> 




</div><!--End Container-->
<body>
</body>
<script src="js/jquery.smooth-scroll.min.js"></script>
<script src="js/jquery-1.10.2.min.js"></script>
<script src="js/lightbox-2.6.min.js"></script>
<script src="js/bootstrap.js"></script>
<script type="text/javascript">
$(document ).ready.(function() { 
$('.carousel').carousel({
interval: 4000 });
$('#sticksCarousel').on('slid.bs.carousel', function() { 
$("#sticksCarouselMessage").text("It worked!");
});
});
</script> 
</html>

我只想用它工作的改变p 中的内容"在执行幻灯片操作之后。

时间: 原作者:

126 5

在 Twitter Bootstrap 示例页面上: http://getbootstrap.com/javascript/#carousel,这里事件有效。


$('.bs-example').on('slid.bs.carousel', function() {
 alert("BALLS");
});

你使用的Bootstrap 版本是什么? 早期版本对滑动事件有不同的名称。 如果使用 Bootstrap 3,那么还有其他问题,所以如果你可以发布更多关于如何调用 carousel的信息,可以帮助你解决问题。

编辑:Jacob,你需要在 document.ready 中初始化 carousel: 然后你就可以。 例如:

Bootstrap 3:


<script>
 $( document ).ready(function() {
 $('.carousel').carousel({ interval: 4000 });
 $('#sticksCarousel').on('slid.bs.carousel', function() { alert("BALLS"); });
 });
</script> 

Bootstrap 2:


<script>
 $( document ).ready(function() {
 $('.carousel').carousel({ interval: 4000 });
 $('#sticksCarousel').on('slid', function() { alert("BALLS"); });
 });
</script> 

100 3

正在使用 $('#featureRotator').bind('slide.bs.carousel', function (e) { console.log('slide event!'); });

而且工作正常它打印了'幻灯片事件'。 我看到了,你在 function(e) 中缺少事件'e'。 尝试使用事件并查看它是否有效。

注意'幻灯片'和'滑动'。 '滑动'在动画和动画之前'slid后滑动'。因此你可以将你的代码添加到以下任何事件中。


$('#featureRotator').bind('slide.bs.carousel', function (e) {
 console.log('slide event starts!');
 });

 $('#featureRotator').bind('slid.bs.carousel', function (e) {
 console.log('slide event finished!');
 });

...