原生方法实现移动端的手动触摸滚动

  var isScrolling, startPos, endPos;
        var slider = {
            //判断设备是否支持touch事件
            touch: (‘ontouchstart‘ in window) || window.DocumentTouch && document instanceof DocumentTouch,
            slider: document.getElementById(‘sliderBox‘),

            //事件
            events: {
                index: 0,     //显示元素的索引
                slider: this.slider,     //this为slider对象
                icons: document.getElementById(‘sliderBox‘),
                icon: document.getElementById(‘sliderBox‘).getElementsByClassName(‘swiper-slide‘),
                handleEvent: function (event) {
                    var self = this;     //this指events对象
                    if (event.type == ‘touchstart‘) {
                        self.start(event);
                    } else if (event.type == ‘touchmove‘) {
                        self.move(event);
                    } else if (event.type == ‘touchend‘) {
                        self.end(event);
                    }
                },
                //滑动开始
                start: function (event) {
                    var touch = event.targetTouches[0];     //touches数组对象获得屏幕上所有的touch，取第一个touch
                    startPos = {x: touch.pageX, y: touch.pageY, time: +new Date};    //取第一个touch的坐标值
                    isScrolling = 0;   //这个参数判断是垂直滚动还是水平滚动
                    if (isScrolling == 0) {
                        this.icons.appendChild(this.icon[0]);
                    }
                    this.icons.addEventListener(‘touchmove‘, this, false);
                    this.icons.addEventListener(‘touchend‘, this, false);
                },
                //移动
                move: function (event) {
                    //当屏幕有多个touch或者页面被缩放过，就不执行move操作
                    if (event.targetTouches.length > 1 || event.scale && event.scale !== 1) return;
                    var touch = event.targetTouches[0];
                    endPos = {x: touch.pageX - startPos.x, y: touch.pageY - startPos.y};
                    isScrolling = Math.abs(endPos.x) < Math.abs(endPos.y) ? 1 : 0;    //isScrolling为1时，表示纵向滑动，0为横向滑动
                    if (isScrolling == 0) {
                        event.preventDefault();      //阻止触摸事件的默认行为，即阻止滚屏
                    }
                },
                //滑动释放
                end: function (event) {
                    var duration = +new Date - startPos.time;    //滑动的持续时间

                    if (isScrolling === 0) {    //当为水平滚动时
                        //this.icon[this.index].className = ‘prize-box swiper-slide‘;
                        if (Number(duration) > 10) {
                            //判断是左移还是右移，当偏移量大于10时执行
                            if (endPos.x > 10) {
                                if (this.index !== 0) this.index -= 1;

                            } else if (endPos.x < -10) {
                                if (this.index !== this.icon.length - 1) this.index += 1;
                            }
                        }
                        console.log(this.index);
                        this.icon[0].className = ‘prize-box swiper-slide first‘;
                        this.icon[1].className = ‘prize-box swiper-slide active‘;
                        this.icon[2].className = ‘prize-box swiper-slide last‘;
                        //this.icons.style.left = -this.index*600 + ‘px‘;
                    }
                    //解绑事件
                    this.icons.removeEventListener(‘touchmove‘, this, false);
                    this.icons.removeEventListener(‘touchend‘, this, false);
                }
            },

            //初始化
            init: function () {
                var self = this;     //this指slider对象
                if (!!self.touch) self.slider.addEventListener(‘touchstart‘, self.events, false);    //addEventListener第二个参数可以传一个对象，会调用该对象的handleEvent属性
            }
        };

        slider.init();