初始封装函数（轮播图）

 常用事件：
      onclick：点击元素时触发
      onmouseover：鼠标移入元素时触发
      onmouseout：鼠标移出元素时触发
      onkeyup：键盘抬起时触发
      onkeydown：键盘按下时触发
      onmouseup：鼠标抬起时触发
      onmousedown：鼠标按下时触发
      onfocus：获取焦点
      onblur：失去焦点

定时器:
      var timeId=window.setInterval(函数,时间);
      执行过程:页面加载完毕后,过了一段时间执行函数,反复的,除非清理定时器
      该定时器会返回自己的id值
      window.clearInterval(定时器的id值);清理定时器
    
     setTimeout(函数,时间);定时器,只执行一次函数的代码-----一次性的定时器
     clearTimeout(定时器的id);
    案例1：

当我们要设置一个简单的点击按钮，使div移动时，需要封装一个关于定时器的函数

//创建一个名为animate 的函数
//移动任意元素到任意位置的函数
//封装函数，定时器
function animate(element , target) {
    //先清理定时器
    clearInterval(element.timeId);
    element.timeId = setInterval(function () {
        //1.获取当前的位置
        var current = element.offsetLeft;
        //2.设置div每次移动多少像素
        var step = 9;
        step = current < target ? step : -step;// 判断向右移还是向左移
        //3.每次移动后的距离
        current += step;
        //4.判断当前移动后的位置是否到达目标位置
        if (Math.abs(target - current) > Math.abs(step)) {
            //设置div的left值
            element.style.left = current + "px";
        } else {
            //否则清除定时器
            clearInterval(element.timeId);
            //将目标位置设置为div的left值
            element.style.left = target + "px";
        }
    }, 20)
}