js实现移动端图片浏览及缩放

需求：

1.图片随着手指滚动

2.双指缩放

3.自动播放

实现：移动端中js有touch事件，touchstart、touchmove、touched，

随手指滚动：touchstart 记录手指起始位置，touchmove计算手指移动位置，并把移动位置赋值给视图的transform translateX

双指缩放：touchstart中得到触摸的两个点，touchmove中计算两个点距离，并把距离值赋给视图的transform scale

自动播放：设置定时器，在每几秒执行的方法中改变视图的transform translateX

自动播放方法：

scrollView() {

        let _this = this;

        var scanner = document.querySelector('.scanner_box');

        var ul = scanner.children[0];

        var w = scanner.offsetWidth;

        var index = 0;

        _this.timer = setInterval(function() {

          if (_this.pageIndex >= 10) {

            _this.pageIndex = 0;

          }

          _this.pageIndex++;

          var translatex = -_this.pageIndex * w;

          ul.style.transition = 'all .3s';

          ul.style.transform = 'translateX(' + translatex + 'px)';

        }, 3000);

      },

双指缩放，滚动：el

el.addEventListener("touchmove", function(e) {

          if (e.touches.length < 2) {

            stopX = e.targetTouches[0].clientX - beginX;

            whiteBack.style.transition = 'none';

          // el.style.transform = 'translateX(' + stopX + 'px)';

          var trans = -_this.picIndex*width +stopX;

          whiteBack.style.transform = 'translateX(' + trans + 'px)';

          }

          e.preventDefault();

          if (e.touches.length >= 2 && istouch) {

            var now = e.touches; //得到第二组两个点

            var scale = _this.getDistance(now[0], now[1]) / _this.getDistance(start[0], start[1]); //得到缩放比例，getDistance是勾股定理的一个方法

            var rotation = _this.getAngle(now[0], now[1]) - _this.getAngle(start[0], start[1]); //得到旋转角度，getAngle是得到夹角的一个方法

            // alert(rotation);

            let rotate = 'rotate(' + rotation.toFixed(1) + 'deg)';

            el.style.transform = 'scale(' + scale + ',' + scale + ')';

            // whiteBack.style.transform ='scale(' + scale + ',' + scale + ')';

            //el.style.transform = 'scale(' + scale + ',' + scale + ') ' + rotate + ' ';

            // el.style.transform = 'rotate(' + rotation + 'deg)';

            //obj.gesturemove && obj.gesturemove.call(el, e); //执行gesturemove方法

          };

        }, false);

getDistance(p1, p2) {

        var x = p2.pageX - p1.pageX,

          y = p2.pageY - p1.pageY;

        return Math.sqrt((x * x) + (y * y));

      },//距离方法

      getAngle(p1, p2) {

        var x = p1.pageX - p2.pageX,

          y = p1.pageY - p2.pageY;

        return Math.atan2(y, x) * 180 / Math.PI;

      }, //夹角方法