jquery - 我需要这个在页面加载时开始并无限循环

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