JS组件库AlloyTouch实现图片轮播过程解析

<div id="carousel-container">
 <div class="carousel">
  <div class="carousel-scroller" id="carousel-scroller">
   <img style="width: 88%;" src="asset/ci1.jpg">
   <img style="width: 88%;" src="asset/ci2.jpg">
   <img style="width: 88%;" src="asset/ci3.jpg">
   <img style="width: 88%;" src="asset/ci4.jpg">
   <img style="width: 88%;" src="asset/ci5.jpg">
  </div>

 </div>
</div>

<script src="../transformjs/transform.js"></script>
<script src="../alloy_touch.js"></script>
<script>
 var scroller = document.querySelector("#carousel-scroller");
 Transform(scroller); 
</script>

new AlloyTouch({
 touch: "#carousel-container",//反馈触摸的dom
 vertical: false,// 监听用户横向触摸
 target: scroller, //运动的对象
 property: "translateX", //被运动的属性
 min:0.88 * window.innerWidth * -5 + window.innerWidth, 
 max: 0
})

var items = document.querySelectorAll("#nav a");
var scroller = document.querySelector("#carousel-scroller");
Transform(scroller);
new AlloyTouch({
 touch: "#carousel-container",//反馈触摸的dom
 vertical: false,//不必需，默认是true代表监听竖直方向touch
 target: scroller, //运动的对象
 property: "translateX", //被运动的属性
 min: window.innerWidth * -3, //不必需,运动属性的最小值
 max: 0, //不必需,滚动属性的最大值
 step: window.innerWidth,
 inertia: false, //不必需,是否有惯性。默认是true
 touchEnd: function (evt, v, index) {

  var step_v = index * this.step * -1;
  var dx = v - step_v;

  if (v < this.min) {
   this.to(this.min);
  } else if (v > this.max) {
   this.to(this.max);
  } else if (Math.abs(dx) < 30) {
   this.to(step_v);
  }
  else if (dx > 0) {
   this.to(step_v + this.step);
  } else {
   this.to(step_v - this.step);
  }

  return false;
 },
 animationEnd: function (evt , v) {
  var i = 0,
   len = items.length;
  for (; i < len; i++) {
   if (i === this.currentPage) {
    items[i].classList.add("active");
   } else {
    items[i].classList.remove("active");
   }
  }

 }
})