xiJs封装一个简单的动画函数，代码如下：

/**
 * 
 * 动画函数多个目标值之间移动
 * 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)
}

本文内容仅供个人学习、研究或参考使用，不构成任何形式的决策建议、专业指导或法律依据。未经授权，禁止任何单位或个人以商业售卖、虚假宣传、侵权传播等非学习研究目的使用本文内容。如需分享或转载，请保留原文来源信息，不得篡改、删减内容或侵犯相关权益。感谢您的理解与支持！

链接: https://fly63.com/article/detial/5409