我正在使用自举旋转木马，首先显示图像，然后几秒后标题从右侧滑入。 它有效，但第一张幻灯片出现问题，它显示第一张幻灯片的标题，当它移动到第二张幻灯片时，它只在一秒后隐藏，然后新标题滑入。
这是我的代码：
<div class="carousel-inner">
<div class="item active">
<img src="test.png" alt="Chicago">
<div class="carousel-caption">
<div class="carousel-caption-inner" data-interval="2000">
<p class="slider-text small"><span class="slider-padding">what makes</span> us <span class="slider-green" id="banner-change">specialists?</span></p>
<p class="slider-text">We just do ip</p>
<p class="slider-text"><span class="slider-green">exceptionally</span></p>
</div>
</div>
</div>
<div class="item">
<img src="test.png" alt="Chicago">
<div class="carousel-caption">
<div class="carousel-caption-inner">
<p class="slider-text small"><span class="slider-padding">what makes</span> us <span class="slider-green">distinctive?</span></p>
<p class="slider-text">Market leading</p>
<p class="slider-text"><span class="slider-green"> brought to life</span> and outside london</p>
</div>
</div>
</div>
<div class="item">
<img src="test.png" alt="Chicago">
<div class="carousel-caption">
<div class="carousel-caption-inner">
<p class="slider-text small"><span class="slider-padding">what makes</span> us <span class="slider-green">stand out?</span></p>
<p class="slider-text">The <span class="slider-green">only way</span> to do great work is to love what you do</p>
</div>
</div>
</div>
<div class="item">
<img src="test.png" alt="Los Angeles">
<div class="carousel-caption">
<div class="carousel-caption-inner">
<p class="slider-text small"><span class="slider-padding">what makes</span> us <span class="slider-green">the right choice?</span></p>
<p class="slider-text">holistic thinking,<span class="slider-green"> made real</span></p>
</div>
</div>
</div>
<div class="item">
<img src="test.png" alt="New York">
<div class="carousel-caption">
<div class="carousel-caption-inner">
<p class="slider-text small"><span class="slider-padding">what makes</span> us <span class="slider-green">effective?</span></p>
<p class="slider-text">Intellectual property</p>
<p class="slider-text">- <span class="slider-green"> brought to life</span></p>
</div>
</div>
</div>
</div>
</div>
和
<script type="text/javascript">
var carouselContainer = $('.carousel');
var slideInterval = 3000;
$( document ).ready(function() {
function toggleCaption() {
$('.carousel-caption').hide();
var caption =
carouselContainer.find('.active').find('.carousel-
caption');
caption.delay(1000).toggle("slide", {direction:'right'});
}
carouselContainer.carousel({
interval: slideInterval,
cycle: true,
pause: "hover"
}).on('slid.bs.carousel', function() {
toggleCaption();
});
});
</script>
有人知道如何解决这个问题吗？似乎该功能仅在第二张幻灯片上激活，而不是第一张幻灯片。
答案 0 :(得分：0)
像这样使用https://daneden.github.io/animate.css/。 您只需要在数据动画属性中更改动画类。
(function( $ ) {
//Function to animate slider captions
function doAnimations( elems ) {
//Cache the animationend event in a variable
var animEndEv = 'webkitAnimationEnd animationend';
elems.each(function () {
var $this = $(this),
$animationType = $this.data('animation');
$this.addClass($animationType).one(animEndEv, function () {
$this.removeClass($animationType);
});
});
}
//Variables on page load
var $myCarousel = $('#carousel-1-z'),
$firstAnimatingElems = $myCarousel.find('.item:first').find("[data-animation ^= 'animated']");
//Initialize carousel
$myCarousel.carousel();
//Animate captions in first slide on page load
doAnimations($firstAnimatingElems);
//Pause carousel
$myCarousel.carousel('pause');
//Other slides to be animated on carousel slide event
$myCarousel.on('slide.bs.carousel', function (e) {
var $animatingElems = $(e.relatedTarget).find("[data-animation ^= 'animated']");
doAnimations($animatingElems);
});
})(jQuery);<link href="https://maxcdn.bootstrapcdn.com/bootstrap/3.3.7/css/bootstrap.min.css" rel="stylesheet"/>
<link href="https://cdnjs.cloudflare.com/ajax/libs/animate.css/3.5.2/animate.css" rel="stylesheet"/>
<script src="https://ajax.googleapis.com/ajax/libs/jquery/2.1.1/jquery.min.js"></script>
<script src="https://maxcdn.bootstrapcdn.com/bootstrap/3.3.7/js/bootstrap.min.js"></script>
<div class="my-carosuel">
<div id="carousel-1-z" class="carousel slide">
<!-- Indicators -->
<ol class="carousel-indicators">
<li data-target="#carousel-1-z" data-slide-to="0" class="active"></li>
<li data-target="#carousel-1-z" data-slide-to="1"></li>
<li data-target="#carousel-1-z" data-slide-to="2"></li>
</ol>
<div class="carousel-inner">
<!-- Wrapper for slides -->
<div class="carousel-inner" role="listbox">
<!-- First slide -->
<div class="item active">
<img src="http://www.placehold.it/1000x400" class="img-responsive">
<div class="carousel-caption">
<h3 data-animation="animated bounceInLeft" class="heading-active">
<a href="">animation test one</a>
</h3>
<h3 data-animation="animated flip">
<a href="">animation test two</a>
</h3>
<h3 data-animation="animated slideInDown">
<a href="">animation test three</a>
</h3>
</div>
</div><!-- /.item -->
<!-- Second slide -->
<div class="item">
<img src="http://www.placehold.it/1000x400" class="img-responsive">
<div class="carousel-caption">
<h3 data-animation="animated bounceInLeft" class="heading-active">
<a href="">animation test one</a>
</h3>
<h3 data-animation="animated flip">
<a href="">animation test two</a>
</h3>
<h3 data-animation="animated slideInDown">
<a href="">animation test three</a>
</h3>
</div>
</div><!-- /.item -->
</div><!-- /.carousel-inner -->
<!-- Controls -->
<a class="left carousel-control" href="#carousel-1-z" role="button" data-slide="next">
<span class="glyphicon glyphicon-chevron-left" aria-hidden="true"></span>
<span class="sr-only">Next</span>
</a>
<a class="right carousel-control" href="#carousel-1-z" role="button" data-slide="next">
<span class="glyphicon glyphicon-chevron-right" aria-hidden="true"></span>
<span class="sr-only">Next</span>
</a>
</div><!-- /.carousel -->
</div>