Question

我需要这个从页面加载开始并无限循环。这是我到目前为止所拥有的。

$(document).ready(function slideshow(){
    $('#slide1').show(500).delay(500).animate({width:'240px'}).delay(500).animate({height:'50px', width:'410px'}).delay(1500).hide(500);
    $('#slide2').delay(4000).show(500).delay(500).animate({width:'150px'});
});

Answer 1

使用setInterval()`重复调用

setInterval（）方法调用函数或计算表达式以指定的间隔（以毫秒为单位）

$(document).ready(function(){
var refreshId = setInterval(function(){
     //your code here
}, 5000);
});

这将每5秒重复一次

Answer 2

如果您始终确定要每5秒钟重复一次，那么@ PSR的答案会有所帮助。

另一种方法是编写一个称为递归函数的函数：一个调用自身的函数。这允许您在所有当前动画完成时开始新动画。

$(document).ready(function slideshow(){
    var animationsToComplete = 2,
    animationsCompleted =0;

    //in your specific example you could omit this and only have a callback on the animation
    //that takes the longest time, but to be a bit more generic, you could use the folowing
    //which tests if all animations are completed and if so, immediately starts a new one.
    var conditionalRecursiveCall = function(){
      if(++animationsCompleted % animationsToComplete == 0){
         recFn();
      }
    }

    var recFn = function(){
      $('#slide1').show(500).delay(500).animate({width:'240px'}).delay(500).animate({height:'50px', width:'410px'}).delay(1500).hide(500, conditionalRecursiveCall)
      $('#slide2').delay(4000).show(500).delay(500).animate({width:'150px'}, 400, 'swing',conditionalRecursiveCall);
    }  

    recFn();
});

我需要这个开始页面加载和无限循环

2 个答案: