0

我正在开发一个引导轮播，它首先显示图像，然后标题在几秒钟后从右侧滑入。它可以工作，但第一张幻灯片存在问题，当它移动到第二张幻灯片时它会显示第一张幻灯片的标题，它只是在一秒钟后被隐藏，然后新的标题滑入。

这是我的代码：

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

有人知道我该如何解决这个问题吗？似乎该功能仅在第二张幻灯片上激活，而不是第一张。

4

1 回答 1

0

像这样使用https://daneden.github.io/animate.css/。您只需要更改data-animation属性中的动画类。

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

于 2017-05-18T09:51:34.717 回答