js学使用setTimeout实现轮循动画

2024-05-06 16:38:27

字体：大中小

来源：转载

供稿：网友

本文实例为大家分享了setTimeout实现轮循动画的具体代码，供大家参考，具体内容如下

代码如下：

<!DOCTYPE html><html lang="en"><head>  <meta charset="UTF-8">  <title>Document</title></head><body>  <div id='box'></div>  <script>    var oBox = document.getElementById("box");    var maxLeft = utils.win('clientWidth')-oBox.offsetWidth;    var step = 5;    var timer = null;    //使用递归思想完成setTimeout的轮循动画：每一次在执行动画之前把上一次设置没用的定时器清除掉，节约我们的内存空间    function move(){      window.clearTimeout(timer);      var curLeft = utils.css(oBox,"left");      if(curLeft+step >= maxLeft){//边界判断        utils.css(oBox,"left",maxLeft);        return;      }      curLeft+=step;      utils.css(oBox,"left",curLeft);      timer = window.setTimeout(move,10)    }    move();  </script></body></html>

以上就是本文的全部内容，希望对大家的学习有所帮助，也希望大家多多支持VeVb武林网。

注：相关教程知识阅读请移步到JavaScript/Ajax教程频道。

上一篇：js轮播图的插件化封装详解

下一篇：ES6中的rest参数与扩展运算符详解