使用jQuery计时动画

您将需要使用animate()和delay()的组合来为每张幻灯片计时。下面是一个我最近用这个拼凑起来的例子。

http://www.panthersweat.com/thursday/

代码如下

var timerCount = 1;
var timer = setInterval('sliderController()',5000);


function sliderController() {
    status = changeSlide(timerCount);
    if(status == 1) {
        timerCount++;
    }
    else{
        timerCount = 1;
    }
}

function changeSlide(timerCount)    {
    if(timerCount != 3) {
        leftValue = -1004 * timerCount;
        $('#banner_slider_container #banner_slides_container').stop().animate({'left':leftValue,'opacity':0.3},'slow',function()    {
            $('#banner_slider_container #banner_slides_container').animate({'opacity':1},'slow');
        });
        return 1;
    }
    else    {
        leftValue = 0;
        $('#banner_slider_container #banner_slides_container').stop().animate({'left':leftValue,'opacity':0.3},'slow',function()    {
            $('#banner_slider_container #banner_slides_container').animate({'opacity':1},'slow');
        });
        return 0;
    }

}

我想这会帮助你。。。。。。。

基本上这就是jQuery的.animate()的作用。你必须用CSS来表达每一个必要的动画状态/步骤,但是像上面这样的简单动画应该不是问题。

http://api.jquery.com/animate/

因为1.4jquery有.delay()函数,你可以在动画中使用。也许这就是你需要的?