0

html:

<div id="slider">
    <img src="images/02.jpg" alt="" class="two">
    <img src="images/01.jpg" alt="" class="one">    
    <img src="images/03.jpg" alt="" class="tri">
    <img src="images/04.jpg" alt="" class="four">
    <img src="images/05.jpg" alt="" class="five">
</div>

CSS：

.one, .two, .tri, .four, .five {position: absolute;}  
.two {bottom: 0;}
.tri {left: -348px;}
.four {left: 348px; top: 19.8em;}
.five {right: -257px;}

这是动画：

var one = $('.one');
var two = $('.two');
var tri = $('.tri');
var four = $('.four');
var five = $('.five');

$(two, tri, four, five).hide();

//first image
$(one).animate({
        'top' : '-17.5em'
    }, 8000, function() {
        $(two).show();
        $(one).delay(6000).fadeOut(1500);
    });

    //second image
    $(two).delay(13700).animate({
        'bottom' : '-30.7em'
    }, 11000, function() {
        $(tri, four, five).show();
        $(two).delay(6000).fadeOut(1000);
    });

    //third/fourth/fifth image
    $(tri).delay(31500).animate({
        'left' : '0'
    }, 600, function() {
        $(tri).delay(6000).fadeOut(1000);
    });

    $(four).delay(31500).animate({
        'top' : '0'
    }, 600, function() {
        $(four).delay(6000).fadeOut(1000);
    });

    $(five).delay(31500).animate({
        'right' : '0'
    }, 600, function() {
        $(one).delay(5000).css({'top' : '0'}).fadeIn();
        $(five).delay(6000).fadeOut(1000);
    });

（我尝试将它放入回调函数中，但无法使其工作，所以我使用了延迟。我知道这是一个不同的问题，但如果有人知道为什么回调不起作用，请告诉）

无论如何，我试图让这个动画无限期地重复。我试过 setInterval，我试过把它放到一个函数中，然后从内部再次调用它，通常我可以在网上找到任何潜在的解决方案，但似乎没有任何效果。您能给我的任何帮助将不胜感激。

4

1 回答 1

0

试试这个

var ctr = 0;
function animate_me(){
++ctr;
//your code;
console.log('animating... #'+ ctr);

//setTimeout(animate_me, 6000);
setTimeout(animate_me, 1500);
}

$(function() {
    animate_me();
});
于 2012-07-08T02:21:48.250 回答