封装一个简单的动画函数

/**

 * 

 * 动画函数多个目标值之间移动

 * 1、如果是正值，则向大取整 2、如果是负值，则向小取整

 * 

 * 

 * 

 * @param {元素} obj 

 * @param {距离} target 

 * @param {回调函数} callback

 */

function ainmate (obj,target,callback){

    // 清除定时器，是指清除谁的定时器，这里是轮播图，所以清除元素的定时器

    clearInterval(obj.timer);

    // 创建定时器，清除定时器，页面中就没有定时器，每轮播一次创建一个定时器，

    // 使其页面中只保留一个定时器,同理元素的定时器

    obj.timer = setInterval(function(){

        //定义步长值变量，用来接收走的步数

        // 步长值 = （距离 - 元素距离左边的距离） 除 10;   //10代表分成几份，可以更多，可以更少，看个人审美

        var step = (target - obj.offsetLeft) / 10;

        // 三元表达式, 当step的距离是向右移动是整数，会有一点误差，所以天花板函数取大，取整   相反往左移动会出现小数，则地板函数取小，取整

        step = step > 0 ? Math.ceil(step) : Math.floor(step) ;

        // 轮播一周后，清除定时器

        if (obj.offsetLeft == target) {

            clearInterval(obj.timer);

            // 回调函数，判断是否有回调函数,如果有调用,如果没有不调用

            if (callback){

                callback();

            }

            // 简写方法

            // callback && callback();

        }

        //轮播的元素需要有css里定位

        // 轮播的运算 

        obj.style.left = obj.offsetLeft + step +'px';

    },30)

}