我们如何让一个盒子在页面中动起来呢，这就是轮播图等页面动态效果的基础，其实很容易想到，我们使用 setInterval () 定时器即可，我们习惯将其封装到函数中，让有需要的元素直接调用此函数即可，简化了代码

封装函数：

 document.addEventListener('DOMContentLoaded',function(){     var box=document.querySelector('div');     var btn=document.querySelector('button');     function run(obj,long){  clearInterval(obj.timer)   //排他思想，先清除一次定时器，防止多次点击按钮产生加速的效果  obj.timer=setInterval(function(){      if(obj.offsetLeft>=long){   window.clearInterval(obj.timer);      }else{   obj.style.left=obj.offsetLeft+1+'px';      }  },20)     }     btn.addEventListener('click',function(){   run(box,3000)     }) })

调用时仅需将要执行动画的元素获取过来放入函数参数中，还有目标停止动画的距离即可