循环播放脚本

时间:2017-11-08 08:30:35

标签: javascript jquery html

我正在使用一个非常酷的脚本Typer来模拟打字机效果,但是,它的方法不包含在动画结束后循环动画。 有谁知道怎么做?

typer('#rotating')
.cursor({block:true,blink:'hard',color:'#EB312A'})
.line('some line')
.pause(5000)
.back('all')
.continue('Other line');

1 个答案:

答案 0 :(得分:2)

您可以像这样使用setInterval

setInterval(function(){ 
  typer('#rotating')
  .cursor({block:true,blink:'hard',color:'#EB312A'})
  .line('some line')
  .pause(5000)
  .back('all')
  .continue('Other line');
}, 10000);

其中10000是传入函数的两次调用之间的毫秒数(当然,您必须根据动画的持续时间指定它)。 setInterval是一个本机函数,允许您定期调用函数。

希望这会对你有帮助;)

修改

Typer在启动时会在目标#rotating内创建一个新的div。 这就是为什么当你多次启动它时,你会得到重复的内容。为了防止这种情况,只需在重新启动typer之前擦除目标div的内容,如下所示:

setInterval(function(){ 
  document.querySelector('#rotating').innerHTML = null; //This clears the content of rotating.
  typer('#rotating')
  .cursor({block:true,blink:'hard',color:'#EB312A'})
  .line('some line')
  .pause(5000)
  .back('all')
  .continue('Other line');
}, 10000);

编辑2

让它直接启动,足够简单:

var startTyper = function(){ 
  document.querySelector('#rotating').innerHTML = null; //This clears the content of rotating.
  typer('#rotating')
  .cursor({block:true,blink:'hard',color:'#EB312A'})
  .line('some line')
  .pause(5000)
  .back('all')
  .continue('Other line');
};
startTyper();
setInterval(startTyper, 10000);

唯一剩下的就是将10000调整为动画的持续时间!