一分鐘搞定AlloyTouch圖片輪播組件

輪播圖也涉及到觸摸和觸摸反饋，同時，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",//反饋觸摸的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");
            }
        }

    }
})複製代碼

由於一共四張圖，因此
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：github.com/AlloyTeam/A…