輪播圖也涉及到觸控和觸控反饋，同時，AlloyTouch可以把慣性運動開啟或者關閉，並且設定min和max為運動區域，超出會自動回彈。

除了一般的豎向滾動，AlloyTouch也可以支援橫向滾動，甚至任何屬性的運動，因為它的設計的本質就是屬性無關，觸控可以反饋到任何屬性的運動。所以AlloyTouch製作各種各樣的輪播元件還是得心應手。

第一種輪播圖如上圖所示。下面開始實現的過程。

第0秒

<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>

一共五張圖，每張圖佔有螢幕比例的百分之88，所以使用者的螢幕裡可以看到一張多一點的圖片，給使用者可以橫向滑動檢視的感覺。

第10秒

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

通過Transform(scroller); 注入CSS3 transform屬性。

第20秒

new AlloyTouch({
  touch: "#carousel-container",//反饋觸控的dom
  vertical: false,// 監聽使用者橫向觸控
  target: scroller,//運動的物件
  property: "translateX",//被運動的屬性
  min:0.88 * window.innerWidth * -5 + window.innerWidth,max: 0
})

這裡最大的難點（其實也沒有什麼難的），就是就是min的值。因為初始值是0，所有向左邊滑動一定是負值。可以得到max一定是0。

那麼min的值就是： 螢幕的寬度－圖片的張數*圖片的寬度

• 圖片的寬度為0.88 * window.innerWidth
• 螢幕的寬度為window.innerWidth
• 圖片的張數為 5

第30秒

如上圖所示，相對於傳統的swipe然後再去觸發滾動，上面的跟手然後再去校正的體驗是更加良好的。那麼怎麼實現呢？
首先，AlloyTouch是支援step配置。

new AlloyTouch({
step: 100，
...
...
...
})

只要使用者設定的step，最後運動結束之後，AlloyTouch都會幫使用者校正到最接近的step的整數倍的位置。

比如上面是100：

• 如果運動的物件停在 120，會被校正到100
• 如果運動的物件停在 151，會被校正到200
• 如果運動的物件停在 281，會被校正到300
• 如果運動的物件停在 21，會被校正到0

第40秒

當然這有個問題，比如使用者從0滑倒30，其實他是想去100，但是會被校正到0!!!

所以光使用校正是不夠。還需要一個API去阻止校正自己去注入邏輯滾動相應的位置。所以你必須支援AlloyTouch的：

to 方法

to(v [,time,easing])

其中time和easing不是必須。time的預設值是600.

第50秒

var items = document.querySelectorAll("#nav a");
var scroller = document.querySelector("#carousel-scroller");
Transform(scroller);
new AlloyTouch({
  touch: "#carousel-container",//不必需，預設是true代表監聽豎直方向touch
  target: scroller,//被運動的屬性
  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");
      }
    }

  }
})

因為一共四張圖，所以
min得到的結果是 window.innerWidth * -3
max的值依然是0
step的值是 window.innerWidth
通過設定 inertia: false,把慣性運動關掉
注意看touchEnd裡面的return false是為了不去計算手指離開屏幕後的校正位置、慣性運動等邏輯。
touchEnd可以拿到當前的位置v以及當前所處的位置index。
animationEnd是運動結束後的回撥，用來設定nav的active。當然不是所有瀏覽器都支援classList，這裡只是為了演示程式碼足夠簡潔。
再注意，在touchEnd和animationEnd中能拿到this，也就是AlloyTouch當前物件的例項。其中，
to方法用來運動當前物件
step是當前的步長
還可以拿到currentPage去獲取當前所處的頁碼
還能拿到min和max值，得到運動的區間。

最後

所有例子演示和程式碼可以在Github上找到。

Github：https://github.com/AlloyTeam/AlloyTouch

以上就是本文的全部內容，希望對大家的學習有所幫助，也希望大家多多支援我們。