记第一次处理移动端滑动事件

  公司的物业项目里面有个轮播图模块，不同于PC端的轮播图，移动端的轮播图没有左右箭头只能左右滑动来实现上一张下一张。

  当然大名鼎鼎的swiper.js完全可以轻轻松松的实现这样的需求，可是对于一个从没写过相关功能的前端萌新来说，这是一个绝好的练手机会。
于是，我先百度了一下移动端的滑动事件，发现jquery mobile里面的“swipeleft”和“swiperight”可以实现相关功能，下载下来试验了一下，发现在部分安卓机上
比较卡顿，可能是由于dom操作太多？然后我就重新搜索了一下，发现了js的原生滑动事件touchstart，touchmove，touchend完整的滑动事件。下面上代码

  //touchstart事件
  var startX = 0, startY = 0;  //触摸起始位置
  var num =0;
  function touchStartFun(event){
    var touch=event.touches[0];
    var x=touch.pageX;
    var y=touch.pageY;
    startX=x;
    startY=y;//记录初始坐标
  }
  //touchmove事件
  function touchMoveFun(event){
    var touch=event.touches[0];
    var x=touch.pageX;
    var y=touch.pageY;
  }
  //touchend事件
  function touchEndFun(event){
    var imgs='{$getHouseInfo["publish_imgpath"]}';
    var imgarr=imgs.split(",");
    var left=$('#swiper').css('left').split('px')[0];
    var touch=event.changedTouches[0];
    var x=touch.pageX;
    var y=touch.pageY;
    if (x-startX>0) {   //判断是左滑还是右滑
        num++;
        if (num>=0) {
          num=0;
        }
      $("#swiper").css({"transition-duration":"0.6s","left":img_contentwidth*num+"px"});
      console.log(left);
    }else{
      num--;
      if (-num>=imgarr.length) {
        num=0;
      }
      $("#swiper").css({"transition-duration":"0.6s","left":img_contentwidth*num+"px"});
      console.log(left);
    }
  }
  //给幻灯片里面的li绑定事件
  var swiperPics = document.getElementById("swiper").getElementsByTagName("li");
  for (var i = 0; i < swiperPics.length; i++) {
    swiperPics[i].addEventListener("touchstart",touchStartFun,true);
    swiperPics[i].addEventListener("touchmove",touchMoveFun,true);
    swiperPics[i].addEventListener("touchend",touchEndFun,true);
  }
});