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 に答える