移动端滑动轮播

<div class="swiperHear" id="swiperHear">
    <div class="component1" ms-repeat="hotList" ms-click="hearList(el.id,el.columnName,el.columnCode,1)">
        <div>
            <img src="images/djgd_zqy.png" alt="" ms-if="el.columnCode == 101">
            <img src="images/djgd_tel.png" alt="" ms-if="el.columnCode == 102">
            <img src="images/djgd_gh.png" alt="" ms-if="el.columnCode == 103">
            <img src="images/djgd_sx.png" alt="" ms-if="el.columnCode == 104">
            <img src="images/djgd_cf.png" alt="" ms-if="el.columnCode == 105">
            <img src="images/djgd_wgzg.png" alt="" ms-if="el.columnCode == 106">
        </div>
        <p>{{el.columnName}}</p>
        <span>{{createAt | date("MM/dd")}} 更新</span>
    </div>
</div>

var oDiv1 = document.getElementById("swiperHear");
//开始移动时 要做的事
oDiv1.addEventListener('touchstart',function(event){
  disX1 = event.touches[0].clientX - oDiv1.offsetLeft;
  disY1 = event.touches[0].clientY - oDiv1.offsetTop;
  if (oDiv1.setCapture) {
    oDiv1.setCapture();
  }
})
//移动过程中 要做的事
oDiv1.addEventListener('touchmove',function(event){
  if($('.component1').length <= 2){
    return
  }
  var wid1 = $('.component1').width()/7.2;
  oDiv1.style.left = event.touches[0].clientX - disX1 + 'px';
  // console.log($('#swiperHear').position().left);
  if($('#swiperHear').position().left>=0){
    oDiv1.style.left = 0 + 'px';
  }
  else if( $(document).width() - ($('#swiperHear .component1:last-child').offset().left+$('#swiperHear .component1:last-child').width()) >= wid1){
    oDiv1.style.left = ($(document).width() - ($('.component1').length*$('.component1').width() + 0.69*wid1*($('.component1').length-1))-1.88*wid1) + 'px';
  }
})