Question

这里我正在尝试制作动画，其中第一张图像应该滑动，然后是第二张图像，然后是第三张图像等等，但现在所有这些动画都会在任何帮助下做什么动画。

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

Answer 1

使用此代码，而不是一次滑动所有图像：

$(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();

修改
要保持动画，请在counter++;之后添加以下代码：

if(counter >= images.length) counter = 0;

如何使用jquery循环播放动画幻灯片

1 个答案: