每次第二次循环都没有正确显示图像的循环

Question

我目前正在使用循环图像的功能。

在每张图像上更改图像应淡出，然后为下一张图像设置反弹动画。

如果你查看我的代码，它目前第一次工作（如果你看一下已注释掉的代码，那就是SECOND时间而不是第一次）但是它会停止淡出/动画化图像并将它们堆叠起来彼此之上。

function loopImage() {
  //initial fade-in time (in milliseconds)
  var initialFadeIn = 1000;
  //interval between items (in milliseconds)
  var itemInterval = 6000;
  //cross-fade time (in milliseconds)
  var fadeTime = 1000;
  //count number of items
  var numberOfItems = $('.explainerItem').length;
  //set current item
  var currentItem = 0;
  //show first item
  // $('.explainerItem').eq(currentItem).fadeIn(initialFadeIn);
  //loop through the items
  var infiniteLoop = setInterval(function() {
    // $('.explainerItem').eq(currentItem).fadeOut(fadeTime);
    $('.explainerItem').eq(currentItem).toggleClass('bounceInUp');
    $('.explainerItem').eq(currentItem).addClass('fadeOut');

    if (currentItem == numberOfItems - 1) {
      currentItem = 0;
    } else {
      currentItem++;
    }
    $('.explainerItem').eq(currentItem).removeClass('fadeOut');
    $('.explainerItem').eq(currentItem).css('display', 'inline');
    $('.explainerItem').eq(currentItem).toggleClass('animated bounceInUp');
    // $('.explainerItem').eq(currentItem).fadeIn(fadeTime,function () {
    /* $(this).toggleClass('animated bounceInUp')*/
    // });

    /*$('.explainerItem').removeClass('fadeOut');
    $('.explainerItem').css('display','none');*/
  }, itemInterval);
}
loopImage();

//$('.explainerItem').active(function(){*/
//  $('.explainerItem').addClass('animated bounceInUp');*/
//});

<script src="https://ajax.googleapis.com/ajax/libs/jquery/1.11.1/jquery.min.js"></script>
<div id="explainer">
  <div class="explainerLink pull-center">
    <img src="http://placehold.it/64x64/FF0000/FFFFFF.png&text=1" class="active animated bounceInUp" />
    <img src="http://placehold.it/64x64/00FF00/FFFFFF.png&text=2" class="" />
    <img src="http://placehold.it/64x64/0000FF/FFFFFF.png&text=3" class="" />
    <img src="http://placehold.it/64x64/FFFF00/FFFFFF.png&text=4" class="" />
  </div>

  <div class="explainerPlay pull-center">
    <h1>
      <a href="#videoModal">
        <i class="fa fa-play-circle" data-toggle="modal" data-target="#videoModal"></i>
      </a>
    </h1>
  </div>

  <div class="explainerModal hide fade" id="videoModal" role="dialog" aria-labelledby="myModalLabel" aria-hidden="true" tabindex="-1">
    <div class="responsive-iFrame-explainer pull-center">
      <iframe width="0" height="0" allowfullscreen="allowfullscreen" class="video-vimeo team" frameborder="0" mozallowfullscreen="mozallowfullscreen" src="videolink" webkitallowfullscreen="webkitallowfullscreen"></iframe>
    </div>
  </div>
</div>

添加了CSS

.explainerItem {
    display: none;
    left: 30%;
    margin-left:auto;
    margin-right:auto;
    text-align:center;
    position: absolute;
    top: 0;
}
.explainerLink {
    height: 211px;
    overflow: hidden;
    position: relative;
}