溫馨提示×
您好，登錄后才能下訂單哦！
點擊 登錄注冊 即表示同意《億速云用戶服務條款》
您好，登錄后才能下訂單哦！
小編這次要給大家分享的是詳解JS組件庫AlloyTouch如何實現圖片輪播，文章內容豐富，感興趣的小伙伴可以來了解一下，希望大家閱讀完這篇文章之后能夠有所收獲。
輪播圖也涉及到觸摸和觸摸反饋，同時，AlloyTouch可以把慣性運動打開或者關閉，并且設置min和max為運動區域，超出會自動回彈。
除了一般的豎向滾動，AlloyTouch也可以支持橫向滾動，甚至任何屬性的運動，因為它的設計的本質就是屬性無關，觸摸可以反饋到任何屬性的運動。所以AlloyTouch制作各種各樣的輪播組件還是得心應手。
第一種輪播圖如上圖所示。下面開始實現的過程。
第0秒
<div id="carousel-container"> <div class="carousel"> <div class="carousel-scroller" id="carousel-scroller"> <img src="asset/ci1.jpg"> <img src="asset/ci2.jpg"> <img src="asset/ci3.jpg"> <img src="asset/ci4.jpg"> <img 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的值就是： 屏幕的寬度－圖片的張數*圖片的寬度
第30秒
如上圖所示，相對于傳統的swipe然后再去觸發滾動，上面的跟手然后再去校正的體驗是更加良好的。那么怎么實現呢？
首先，AlloyTouch是支持step配置。
new AlloyTouch({
step: 100，
...
...
...
})
只要用戶設置的step，最后運動結束之后，AlloyTouch都會幫用戶校正到最接近的step的整數倍的位置。
比如上面是100：
第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值，得到運動的區間。
看完這篇關于詳解JS組件庫AlloyTouch如何實現圖片輪播的文章，如果覺得文章內容寫得不錯的話，可以把它分享出去給更多人看到。
免責聲明：本站發布的內容（圖片、視頻和文字）以原創、轉載和分享為主，文章觀點不代表本網站立場，如果涉及侵權請聯系站長郵箱：is@yisu.com進行舉報，并提供相關證據，一經查實，將立刻刪除涉嫌侵權內容。
