AlloyTouch.js 源码 学习笔记及原理说明

alloyTouch这个库其实可以做很多事的, 比较抽象, 需要我们用户好好的思考作者提供的实例属性和一些回调方法(touchStart,
change, touchMove, pressMove, tap, touchEnd, touchCancel, reboundEnd, animationEnd, correctionEnd).
哇, 提供了这么多回调啊, 因为我也刚玩，用到的不多。
change回调很常用(比如上拉，下拉刷新要用到),配合touchStart, animationEnd等,看需求吧
touchEnd, animationEnd(写轮播用到)。
因为我也刚用, 暂时没怎么研究其他回调的用法,但是我都在源码中标记了什麽时候触发回调的。

原理说明:
alloyTouch库其实是一个数字运动的库,我再看源码时，看见源码里_end()中计算各种比值和目标值,目的就是让dom在什么时间内运动到什么目标值。
当然对外也提供了to方法,让dom运动到用户指定的目标值。具体看源码注释。

源码笔记：

    由于demo没全看完，所以有的注释理解的不太到位。有问题，欢迎指正。

/* AlloyTouch v0.2.1
 * By AlloyTeam http://www.alloyteam.com/
 * Github: https://github.com/AlloyTeam/AlloyTouch
 * MIT Licensed.
 * Sorrow.X --- 添加注释,注释纯属个人理解
 */

 // 兼容不支持requestAnimationFrame的浏览器
;(function () {
    'use strict';

    if (!Date.now)
        Date.now = function () { return new Date().getTime(); };

    var vendors = ['webkit', 'moz'];
    for (var i = 0; i < vendors.length && !window.requestAnimationFrame; ++i) {
        var vp = vendors[i];
        window.requestAnimationFrame = window[vp + 'RequestAnimationFrame'];
        window.cancelAnimationFrame = (window[vp + 'CancelAnimationFrame']
                                   || window[vp + 'CancelRequestAnimationFrame']);
    }
    if (/iP(ad|hone|od).*OS 6/.test(window.navigator.userAgent) // iOS6 is buggy
        || !window.requestAnimationFrame || !window.cancelAnimationFrame) {
        var lastTime = 0;
        window.requestAnimationFrame = function (callback) {
            var now = Date.now();
            var nextTime = Math.max(lastTime + 16, now);
            return setTimeout(function () { callback(lastTime = nextTime); },
                              nextTime - now);
        };
        window.cancelAnimationFrame = clearTimeout;
    }
}());

(function () {

    // 给元素绑定事件, 默认冒泡
    function bind(element, type, callback) {
        element.addEventListener(type, callback, false);
    };

    // 三次贝塞尔
    function ease(x) {
        return Math.sqrt(1 - Math.pow(x - 1, 2));
    };

    // 相反的三次贝塞尔
    function reverseEase(y) {
        return 1 - Math.sqrt(1 - y * y);
    };

    // INPUT|TEXTAREA|BUTTON|SELECT这几个标签就不用阻止默认事件了
    function preventDefaultTest(el, exceptions) {
        for (var i in exceptions) {
            if (exceptions[i].test(el[i])) {
                return true;
            };
        };
        return false;
    };

    var AlloyTouch = function (option) {
        
        this.element = typeof option.touch === "string" ? document.querySelector(option.touch) : option.touch;    // 反馈触摸的dom
        this.target = this._getValue(option.target, this.element);    // 运动的对象
        this.vertical = this._getValue(option.vertical, true);    // 不必需，默认是true代表监听竖直方向touch
        this.property = option.property;    // 被滚动的属性
        this.tickID = 0;

        this.initialValue = this._getValue(option.initialValue, this.target[this.property]);    // 被运动的属性的初始值,默认从Transform原始属性拿值
        this.target[this.property] = this.initialValue;    // 给运动的属性赋值
        this.fixed = this._getValue(option.fixed, false);
        this.sensitivity = this._getValue(option.sensitivity, 1);    // 默认是1, 灵敏度
        this.moveFactor = this._getValue(option.moveFactor, 1);    // move时的运动系数
        this.factor = this._getValue(option.factor, 1);    // 系数
        this.outFactor = this._getValue(option.outFactor, 0.3);    // 外部系数
        this.min = option.min;    // 不必需,滚动属性的最小值,越界会回弹
        this.max = option.max;    // 不必需,运动属性的最大值,越界会回弹, 一般为0
        this.deceleration = 0.0006;    // 减速系数
        this.maxRegion = this._getValue(option.maxRegion, 600);    // 最大区域, 默认60
        this.springMaxRegion = this._getValue(option.springMaxRegion, 60);    // 弹动的最大值区域, 默认60
        this.maxSpeed = option.maxSpeed;    // 最大速度
        this.hasMaxSpeed = !(this.maxSpeed === undefined);    // 是否有最大速度属性
        this.lockDirection = this._getValue(option.lockDirection, true);    // 锁定方向

        var noop = function () { };    // 空函数
        this.touchStart = option.touchStart || noop;
        this.change = option.change || noop;
        this.touchMove = option.touchMove || noop;
        this.pressMove = option.pressMove || noop;
        this.tap = option.tap || noop;
        this.touchEnd = option.touchEnd || noop;
        this.touchCancel = option.touchCancel || noop;
        this.reboundEnd = option.reboundEnd || noop;    // 回弹回调
        this.animationEnd = option.animationEnd || noop;
        this.correctionEnd = option.correctionEnd || noop;    // 修改回调

        this.preventDefault = this._getValue(option.preventDefault, true);    // 默认是true,是否阻止默认事件
        this.preventDefaultException = { tagName: /^(INPUT|TEXTAREA|BUTTON|SELECT)$/ };    // 这几个tag标签,阻止默认事件例外
        this.hasMin = !(this.min === undefined);    // 是否有min,和max属性
        this.hasMax = !(this.max === undefined);
        if (this.hasMin && this.hasMax && this.min > this.max) {    // 最小值不能比最大值大啊
            throw "the min value can't be greater than the max value."
        };
        this.isTouchStart = false;    // 触摸是否开始
        this.step = option.step;    // 步数(回弹)
        this.inertia = this._getValue(option.inertia, true);    // 默认true,开启惯性效果

        this._calculateIndex();    // 添加this.currentPage属性,如果写轮播的话

        this.eventTarget = window;
        if(option.bindSelf){
            this.eventTarget = this.element;    // 默认touchmove, touchend, touchcancel绑定在 window 上的, 如果option.bindSelf为真值,则绑定到反馈触摸的dom
        };

        this._moveHandler = this._move.bind(this);    // 函数赋值
        // 反馈触摸的dom只绑定了touchstart(_start), window绑定了 touchmove(_move), touchend(_end), touchcancel(_cancel)方法
        bind(this.element, "touchstart", this._start.bind(this));
        bind(this.eventTarget, "touchend", this._end.bind(this));
        bind(this.eventTarget, "touchcancel", this._cancel.bind(this));
        this.eventTarget.addEventListener("touchmove", this._moveHandler, { passive: false, capture: false });    // 使用 passive 改善的滚屏性能
        this.x1 = this.x2 = this.y1 = this.y2 = null;    // start时的坐标和move时的坐标
    };

    AlloyTouch.prototype = {
        _getValue: function (obj, defaultValue) {    // 取用户的值还是使用默认值
            return obj === undefined ? defaultValue : obj;
        },
        _start: function (evt) {
            this.isTouchStart = true;    // 触摸开始
            this.touchStart.call(this, evt, this.target[this.property]);    // (1. touchStart(evt, propValue)回调)
            cancelAnimationFrame(this.tickID);    // 只要触摸就停止动画
            this._calculateIndex();    // 重新计算this.currentPage属性值
            this.startTime = new Date().getTime();    // 开始的时间戳
            this.x1 = this.preX = evt.touches[0].pageX;    // 开始前的坐标保存到x,y 和 preXY去
            this.y1 = this.preY = evt.touches[0].pageY;
            this.start = this.vertical ? this.preY : this.preX;    // 如果监听竖直方向则取y坐标,否则横向方向取x坐标
            this._firstTouchMove = true;    // 开始move(这个条件为_move做铺垫)
            this._preventMove = false;    // 不阻止dom继续运动(开启惯性运动之旅的条件之一 哈哈)
        },
        _move: function (evt) {
            if (this.isTouchStart) {    // 触摸开始了
                var len = evt.touches.length,    // 手指数量
                    currentX = evt.touches[0].pageX,    // move时的坐标
                    currentY = evt.touches[0].pageY;

                if (this._firstTouchMove && this.lockDirection) {    // 开始move 且 锁定方向 
                    var dDis = Math.abs(currentX - this.x1) - Math.abs(currentY - this.y1);    // 是左右滑动还是上下滑动(x>y为水平, y>x为竖直)
                    if (dDis > 0 && this.vertical) {    // 左右滑动 且 监听竖直方向
                        this._preventMove = true;    // 阻止dom继续运动
                    } else if (dDis < 0 && !this.vertical) {    // 竖直滑动 且 监听横向方向
                        this._preventMove = true;
                    };    // 以上2种情况直接不开启惯性运动之旅(因为左右滑动的话this.vertical需为false,竖直滑动的话this.vertical需为true)
                    this._firstTouchMove = false;    // 变成false, 为了手指连续移动中,此方法就不用进来了
                };
                if(!this._preventMove) {    // move时 属性运动(关闭惯性运动后, 其实只有此运动了, 手指移动才会运动, 离开则不会运动了)

                    var d = (this.vertical ? currentY - this.preY : currentX - this.preX) * this.sensitivity;    // 根据竖直还是左右来确定差值 * 灵敏度
                    var f = this.moveFactor;    // 变量f的值为 move时的运动系数(默认1)
                    if (this.hasMax && this.target[this.property] > this.max && d > 0) {    // 有最大值 且 运动属性值>最大值 且 坐标差值d>0
                        f = this.outFactor;
                    } else if (this.hasMin && this.target[this.property] < this.min && d < 0) {    // 有最小值 且 运动属性值<最小值 且 坐标差值d<0
                        f = this.outFactor;    // 满足以上2中条件 变量f 的值就变成 this.outFactor(默认0.3)
                    };
                    d *= f;    // 坐标差值再乘以运动系数
                    this.preX = currentX;    // 把move时的坐标保存到preXY去
                    this.preY = currentY;
                    if (!this.fixed) {    // this.fixed默认false(fixed一旦固定了,move时, dom也不会运动)
                        this.target[this.property] += d;    //把坐标的差值且乘以运动系数后的结果累加给运动的对象(被transform.js加工后的dom对象)
                        // console.log('_move: ' + this.target[this.property]);
                    };
                    this.change.call(this, this.target[this.property]);    // (2. move时的change(evt, propValue)回调)
                    var timestamp = new Date().getTime();    // move时的时间戳
                    if (timestamp - this.startTime > 300) {    // move时的时间戳和start时的时间戳大于300的话
                        this.startTime = timestamp;    // move时的时间戳赋值给start时的时间戳
                        this.start = this.vertical ? this.preY : this.preX;    // 重新计算this.start值
                    };
                    this.touchMove.call(this, evt, this.target[this.property]);    // (3. touchMove(evt, propValue)回调)
                };

                if (this.preventDefault && !preventDefaultTest(evt.target, this.preventDefaultException)) {    //阻止默认事件除了INPUT|TEXTAREA|BUTTON|SELECT这几个标签
                    evt.preventDefault();
                };

                if (len === 1) {    // 一根手指
                    if (this.x2 !== null) {    //一开始为null
                        evt.deltaX = currentX - this.x2;    // move移动时的差值
                        evt.deltaY = currentY - this.y2;

                    } else {
                        evt.deltaX = 0;    // 一开始差值为0啦
                        evt.deltaY = 0;
                    }
                    this.pressMove.call(this, evt, this.target[this.property]);    // (4. pressMove(evt, propValue)回调)
                }
                this.x2 = currentX;    //把本次坐标赋值给x2,y2
                this.y2 = currentY;
            }
        },
        _end: function (evt) {
            if (this.isTouchStart) {    // 触摸开始了

                this.isTouchStart = false;    // 触摸开始变量置为false(_move方法进不去了)
                var self = this,    // 存个实例
                    current = this.target[this.property],    // 当前运动对象的运动属性的值
                    triggerTap = (Math.abs(evt.changedTouches[0].pageX - this.x1) < 30 && Math.abs(evt.changedTouches[0].pageY - this.y1) < 30);    // 是否触发tap事件回调
                if (triggerTap) {    // 触发tap事件
                    this.tap.call(this, evt, current);    // (5. tap(evt, propValue)回调)
                };

                if (this.touchEnd.call(this, evt, current, this.currentPage) === false) return;    // (6. touchEnd(evt, propValue, 当前第几页)回调)这个主要给轮播用的吧

                if (this.hasMax && current > this.max) {    // 有最大值 且 当前运动对象的运动属性的值大于最大值

                    this._to(this.max, 200, ease, this.change, function (value) {    // (最大小值, time, 曲线, change函数, fn)
                        this.reboundEnd.call(this, value);
                        this.animationEnd.call(this, value);
                    }.bind(this));

                } else if (this.hasMin && current < this.min) {    // 有最小值 且 当前运动对象的运动属性的值小于最小值

                    this._to(this.min, 200, ease, this.change, function (value) {
                        this.reboundEnd.call(this, value);
                        this.animationEnd.call(this, value);
                    }.bind(this));

                } else if (this.inertia && !triggerTap && !this._preventMove) {    // 开启惯性效果(默认为true) 且 不触发tap事件 且 this._preventMove为false;

                    var dt = new Date().getTime() - this.startTime;    // _end时的时间戳和_move时的时间戳的差值
                    if (dt < 300) {    // 小于300ms就执行惯性运动
                        var distance = ((this.vertical ? evt.changedTouches[0].pageY : evt.changedTouches[0].pageX) - this.start) * this.sensitivity,    // _end中的坐标与_move中坐标的差值乘以灵敏度
                            speed = Math.abs(distance) / dt,    // 速度为坐标差值/时间戳差值
                            speed2 = this.factor * speed;    // 速度2为 系数(默认1)乘以速度
                        if(this.hasMaxSpeed && speed2 > this.maxSpeed) {    // 有最大速度 且 速度2大于最大速度
                            speed2 = this.maxSpeed;    // 速度2就为最大速度
                        };

                        // 目标值destination = 当前运动对象的运动属性的值 + (速度2*速度2)/(2*减速系数)*(-1||1); 
                        var destination = current + (speed2 * speed2) / (2 * this.deceleration) * (distance < 0 ? -1 : 1); 
                        // console.log('distance： '+ distance);
                        // console.log('目标值destination： '+ destination);
                        // console.log('差值： '+ destination > current);

                        var tRatio = 1;    // 比例
                        if (destination < this.min ) {    // 目标值 比 最小值 小
                            if (destination < this.min - this.maxRegion) {
                                tRatio = reverseEase((current - this.min + this.springMaxRegion) / (current - destination));
                                destination = this.min - this.springMaxRegion;
                            } else {
                                tRatio = reverseEase((current - this.min + this.springMaxRegion * (this.min - destination) / this.maxRegion) / (current - destination));
                                destination = this.min - this.springMaxRegion * (this.min - destination) / this.maxRegion;
                            }
                        } else if (destination > this.max) {    // 目标值 比 最大值 大
                            if (destination > this.max + this.maxRegion) {
                                tRatio = reverseEase((this.max + this.springMaxRegion - current) / (destination - current));
                                destination = this.max + this.springMaxRegion;
                            } else {
                                tRatio = reverseEase((this.max + this.springMaxRegion * ( destination-this.max) / this.maxRegion - current) / (destination - current));
                                destination = this.max + this.springMaxRegion * (destination - this.max) / this.maxRegion;
                                
                            }
                        };

                        // 持续时间duration = 数字舍入(速度/减速系数) * 比例;
                        var duration = Math.round(speed / self.deceleration) * tRatio;
                        // console.log('持续时间duration: ' + duration);

                        // end方法计算好的目标值和持续时间传入_to方法,运动起来吧
                        self._to(Math.round(destination), duration, ease, self.change, function (value) {    // 回调函数的value 就是 destination

                            if (self.hasMax && self.target[self.property] > self.max) {    // 有最大值 且 运动属性的值大于最大值

                                cancelAnimationFrame(self.tickID);
                                self._to(self.max, 600, ease, self.change, self.animationEnd);

                            } else if (self.hasMin && self.target[self.property] < self.min) {    // 有最小值 且 运动属性的值小于最小值

                                cancelAnimationFrame(self.tickID);
                                self._to(self.min, 600, ease, self.change, self.animationEnd);

                            } else {
                                self._correction();    // 回弹
                            };

                            self.change.call(this, value);    // (7. change(运动属性的值)回调函数)
                        });
                    } else {
                        self._correction();    // 回弹
                    }
                } else {
                    self._correction();    // 回弹
                };

                // 阻止默认事件
                if (this.preventDefault && !preventDefaultTest(evt.target, this.preventDefaultException)) {
                    evt.preventDefault();
                };

            };
            // 坐标置null
            this.x1 = this.x2 = this.y1 = this.y2 = null;
        },
        // 提供目标值, 持续时间, 然后根据时间戳和time持续时间的差值比较, 时间戳< time的话就一直调用动画,否则结束
        _to: function (value, time, ease, onChange, onEnd) {    // value:目标值, time:持续时间, ease: 曲线动画, onChange: this.change回调函数(用户的), onEnd回调
            if (this.fixed) return;    // fixed(默认false)有真值就return掉
            var el = this.target,    // 运动的对象
                property = this.property;    // 运动的属性
            var current = el[property];    // 运动对象运动属性当前的值
            var dv = value - current;    // 目标值与当前属性的差值
            var beginTime = new Date();    // 开始时间戳
            var self = this;    // 存个实例
            var toTick = function () {

                var dt = new Date() - beginTime;    // 时间戳差值
                if (dt >= time) {    // 时间戳差值大于持续时间
                    el[property] = value;    // 把目标值赋值给dom属性
                    onChange && onChange.call(self, value);    // (7. change(目标值)回调函数)
                    onEnd && onEnd.call(self, value);    // onEnd回调
                    return;
                };
                el[property] = dv * ease(dt / time) + current;
                // console.log(el[property]);
                self.tickID = requestAnimationFrame(toTick);    // 动画自调用
                onChange && onChange.call(self, el[property]);    //(7. change(属性值)回调函数)
            };
            toTick();    // 调用
        },
        // 该函数用来当动画完成后根据this.step修正一点(回弹效果)
        _correction: function () {
            if (this.step === undefined) return;    // step没赋值的话就return掉
            var el = this.target,    // 运动的对象
                property = this.property;    // 运动对象的运动属性
            var value = el[property];    // 运动对象运动属性的值
            var rpt = Math.floor(Math.abs(value / this.step));    // 向下取整(取绝对值(运动对象运动属性的值/ this.step值))
            var dy = value % this.step;    // 运动对象运动属性的值取余数

            if (Math.abs(dy) > this.step / 2) {    // 我想这里又应用了啥物理原理根据条件判断,来计算value目标值的,然后调用_to方法执行惯性运动
                this._to((value < 0 ? -1 : 1) * (rpt + 1) * this.step, 400, ease, this.change, function (value) {
                    this._calculateIndex();
                    this.correctionEnd.call(this, value);
                    this.animationEnd.call(this, value);
                }.bind(this));
            } else {
                this._to((value < 0 ? -1 : 1) * rpt * this.step, 400, ease, this.change, function (value) {
                    this._calculateIndex();    // 重新计算this.currentPage值
                    this.correctionEnd.call(this, value);    // (8. correctionEnd(属性值)回调函数)
                    this.animationEnd.call(this, value);    // (9. animationEnd(属性值)回调函数)
                }.bind(this));
            }
        },
        _cancel: function (evt) {
            var current = this.target[this.property];
            this.touchCancel.call(this, evt, current);
            this._end(evt);
        },
        // 给用户使用的, 控制dom以不同的曲线动画运动
        to: function (v, time, user_ease) {
            this._to(v, this._getValue(time, 600), user_ease || ease, this.change, function (value) {
                this._calculateIndex();
                this.reboundEnd.call(this, value);    // (10. reboundEnd(属性值)回调函数)
                this.animationEnd.call(this, value);    // (9. animationEnd(属性值)回调函数)
            }.bind(this));

        },
        // 计算this.currentPage值
        _calculateIndex: function () {
            if (this.hasMax && this.hasMin) {
                this.currentPage = Math.round((this.max - this.target[this.property]) / this.step);    // 当前第几页,比如轮播图的第几个,从0开始
            }
        }
        
    };

    // 抛出去
    if (typeof module !== 'undefined' && typeof exports === 'object') {
        module.exports = AlloyTouch;
    } else {
        window.AlloyTouch = AlloyTouch;
    };

})();

使用姿势：(由于此库比较抽象，使用姿势需要根据需求来使用，以下提供了3个demo的使用姿势，基本差不多，可以用手机扫二维码看看(由于编写html页面时，没考虑手机屏幕的适应，所以凑合这点吧，哈哈))

        // es5 语法
        // 列表加载更多
        var List = function() {
            this.list_Target = document.querySelector("#list_target");
            this.Ul = this.list_Target.children[0];
            this.oList = document.querySelector("#list");
            //给element注入transform属性
            Transform(this.list_Target);

            this.at = null;
            this.loading = false;
            this.index = 21;
        };

        Object.assign(List.prototype, {
            init: function() {
                var self = this;
                this.at = new AlloyTouch({
                    touch: '#list',//反馈触摸的dom
                    vertical: true,//不必需，默认是true代表监听竖直方向touch
                    target: this.list_Target, //运动的对象
                    property: "translateY",  //被滚动的属性
                    factor: 1,//不必需,默认值是1代表touch区域的1px的对应target.y的1
                    inertia: true,
                    min: this.oList.offsetHeight - this.list_Target.offsetHeight, //不必需,滚动属性的最小值
                    max: 0, //不必需,滚动属性的最大值
                    step: 2,
                    touchStart: function() {
                        self.getMin();
                    },
                    change: function(v) {
                        // console.log(v);
                        if (v < this.min && !self.loading) {
                            self.loading = true;
                            self.loadMore();
                        };
                    }
                });
            },
            getMin: function() {
                this.at.min = -parseInt(getComputedStyle(this.list_Target).height) + this.oList.offsetHeight;
            },
            loadMore: function() {
                setTimeout(function() {
                    this.loading = false;
                    var Oli = null,
                        i = 0,
                        len = 20;

                    for (; i < len; i ++) {
                        this.index += 1;
                        Oli = document.createElement('li');
                        Oli.innerHTML = this.index;
                        this.Ul.appendChild(Oli);     // 这里测试，不推荐这么写啊, 太消耗性能了
                    };

                    this.getMin();
                }.bind(this), 500);
            }
        });

        new List().init();

        // es6 语法 
        /*let flower = (new class {
            constructor() {
                this.at = null;
                this.target = this.$('testImg');
                Transform(this.target);
            }

            $(id) {
                return document.querySelector('#' + id);
            }

            init() {
                this.at = new AlloyTouch({
                    touch: this.target,//反馈触摸的dom
                    vertical: false,//不必需，默认是true代表监听竖直方向touch
                    target: this.target, //运动的对象
                    property: "rotateY",  //被滚动的属性
                    factor: 1,//不必需,默认值是1代表touch区域的1px的对应target.y的1
                    inertia: true,
                    step: 100
                });
            }
        }).init();*/


        // 花朵
        var flower = function() {
            
            var target = $('testImg');
            Transform(target);

            function $(id) {
                return document.querySelector('#' + id);
            };

            return function() {
                return new AlloyTouch({
                    touch: target,//反馈触摸的dom
                    vertical: false,//不必需，默认是true代表监听竖直方向touch
                    target: target, //运动的对象
                    property: "rotateY",  //被滚动的属性
                    factor: 1,//不必需,默认值是1代表touch区域的1px的对应target.y的1
                    inertia: true,
                    step: 100
                });
            };
        }()();
        

        // 轮播
        var carousel = function() {
            var scroller = document.querySelector('#carousel_scroller');
            Transform(scroller);
            var aA = document.querySelectorAll('#nav a');
            var at = null;
            var tickId = null;

            function init() {
                at = new AlloyTouch({
                    touch: '#carousel_container',
                    target: scroller,
                    vertical: false,
                    property: 'translateX',
                    step: window.innerWidth,
                    max: 0,
                    min: - window.innerWidth * 3,
                    touchStart: function() {
                        clearInterval(tickId);
                    },
                    touchEnd: function(evt, v, index) {
                        var value = -(this.step * index);
                        var dt = v - value;
                        console.log(dt);

                        if (v > this.max) {    // 属性值大于最大值取最大值
                            this.to(this.max);
                        } else if (v < this.min) {    // 属性值小于最小值取最小值
                            this.to(this.min);
                        } else if (Math.abs(dt) < 30) {    // 2边空隙小于30就回到当前值
                            this.to(value);
                        } else if (dt > 0) {    // 大于0往右边滚动一个
                            this.to(value + this.step);
                        } else {    // 小于0就往左边滚动一个
                            this.to(value - this.step);
                        };
                        loop();
                        return false;
                    },
                    animationEnd: function(evt, v) {
                        Array.prototype.slice.call(aA).forEach(function(item, index) {
                            item.className = '';
                        });
                        aA[this.currentPage].className = 'active';
                    }
                });
            };

            // 循环播放
            function loop() {
                tickId = setInterval(function() {
                    this.currentPage += 1;
                    if (this.currentPage > 3) {
                        this.currentPage = 0;
                    };
                    this.to(-(this.currentPage * this.step));
                }.bind(at), 2000);
            };

            return {
                init: init,
                loop: loop
            };
        }();
        carousel.init();
        carousel.loop();

我觉得还是用手机体验一把alloyTouch的灵活和强大吧，手机对准扫一扫吧。

3个关于alloyTouch的小demo。

 更多demo，请去github看看。

ps: 

此库还是很有用的，很喜欢。
github: https://github.com/AlloyTeam/AlloyTouch