Javascript 如何在使用jquery循环动画幻灯片时将其排队

在这里，我试图制作动画，其中第一个图像应该滑动，下一个第二个图像，然后是第三个图像，等等，但现在所有的图像都被动画化了，有什么帮助吗

<script>
 $(window).load(function(){
    $(".frame-container").each(function(){

   var frameheight=$(this).innerHeight();
   var framewidth=$(this).innerWidth();

    var refRatio = framewidth/frameheight;
   var imgH = $(this).children("img").height();
   var imgW = $(this).children("img").width();

   if ( (imgW/imgH) < refRatio ) {

        //  $(this).addClass("portrait");
         var moveImage = (imgH - frameheight)/2;
    //alert(moveImage);
        $(this).children("img").css({'position':'relative','top':'-'+moveImage+'px'});
         $(this).children("img").animate({ top: '-100px',position:'relative' }, 5000 );

   } else {
         // alert(refRatio+"@@@@@"+(imgW/imgH));
       //   $(this).addClass("landscape");
       var moveImage = (imgW - framewidth)/2;
//alert(moveImage);
         $(this).children("img").css({'position':'relative','left':'-'+moveImage+'px'});
 $(this).children("img").animate({  left: '-100px','position':'relative' }, 5000 );
   }
});
     });
</script>




    <div class="row">
        <div class="col-md-6 col-xs-6 col-sm-6">
            <div class="box1 frame-container">
           <img src="images/8.JPG"/>
            </div>
        </div>
        <div class="col-md-6 col-xs-6 col-sm-6">
            <div class="box2 frame-container"><img src="images/9.JPG"  /></div>
        </div>
     </div>


     <div class="row">
        <div class="col-md-6 col-xs-6 col-sm-6">
            <div class="box3 frame-container"><img src="images/10.JPG"  /></div>
        </div>
        <div class="col-md-6 col-xs-6 col-sm-6">
            <div class="box4 frame-container"><img src="images/11.jpg"  /></div>
            <div class="box5 frame-container"><img src="images/12.JPG" /></div>
        </div>
     </div>

$（窗口）。加载（函数（）{
$（“.frame容器”）.each（函数（）{
var frameheight=$（this.innerHeight（）；
var framewidth=$（this）.innerWidth（）；
var refRatio=帧宽/帧高；
var imgH=$（this）.children（“img”）.height（）；
var imgW=$（this）.children（“img”）.width（）；
如果（（imgW/imgH）<参考）{
//$（此）.addClass（“肖像”）；
var moveImage=（imgH-帧高）/2；
//警报（移动图像）；
$（this.children（“img”）.css（{'position'：'relative'，'top'：'-'+moveImage+'px'）；
$（this.children（“img”）.animate（{top:'-100px'，position:'relative'}，5000）；
}否则{
//警报（refRatio++@@@@++（imgW/imgH））；
//$（此）.addClass（“景观”）；
var moveImage=（imgW-framewidth）/2；
//警报（移动图像）；
$（this.children（“img”）.css（{'position'：'relative'，'left'：'-'+moveImage+'px'）；
$（this.children（“img”）.animate（{左：'-100px'，位置：'relative'，5000）；
}
});
});

不要使用此代码一次滑动所有图像：

$(this).children("img").animate({ top: '-100px',position:'relative' }, 5000 );

var images = $(this).children("img");
var counter = 0;
function slideImage()
{
    if(counter < images.length)
    {
        $(images[counter]).animate(
            { top: '-100px',position:'relative' },
            5000,
            function(){
                slideImage();
            }
        );
        counter++;
    }
}
slideImage();

幻灯片下一步在第一个幻灯片完成其幻灯片动画后，使用以下代码：

$(this).children("img").animate({ top: '-100px',position:'relative' }, 5000 );

var images = $(this).children("img");
var counter = 0;
function slideImage()
{
    if(counter < images.length)
    {
        $(images[counter]).animate(
            { top: '-100px',position:'relative' },
            5000,
            function(){
                slideImage();
            }
        );
        counter++;
    }
}
slideImage();

---

我怎样才能永远保持这个动画呢？我一直在尝试调用函数中的函数，但它不是happennig@3bu1请看我已经添加了上述解决方案。