快捷導(dǎo)航

JS組件庫AlloyTouch實(shí)現(xiàn)圖片輪播過程解析

更新時間：2020年05月29日 10:50:18 作者：javascript癡癡

這篇文章主要介紹了JS組件庫AlloyTouch實(shí)現(xiàn)圖片輪播組件過程解析,文中通過示例代碼介紹的非常詳細(xì)，對大家的學(xué)習(xí)或者工作具有一定的參考學(xué)習(xí)價值,需要的朋友可以參考下

輪播圖也涉及到觸摸和觸摸反饋，同時，AlloyTouch可以把慣性運(yùn)動打開或者關(guān)閉，并且設(shè)置min和max為運(yùn)動區(qū)域，超出會自動回彈。

除了一般的豎向滾動，AlloyTouch也可以支持橫向滾動，甚至任何屬性的運(yùn)動，因?yàn)樗脑O(shè)計(jì)的本質(zhì)就是屬性無關(guān)，觸摸可以反饋到任何屬性的運(yùn)動。所以AlloyTouch制作各種各樣的輪播組件還是得心應(yīng)手。

第一種輪播圖如上圖所示。下面開始實(shí)現(xiàn)的過程。

第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，所以用戶的屏幕里可以看到一張多一點(diǎn)的圖片，給用戶可以橫向滑動查看的感覺。

第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,// 監(jiān)聽用戶橫向觸摸
 target: scroller, //運(yùn)動的對象
 property: "translateX", //被運(yùn)動的屬性
 min:0.88 * window.innerWidth * -5 + window.innerWidth, 
 max: 0
})

這里最大的難點(diǎn)（其實(shí)也沒有什么難的），就是就是min的值。因?yàn)槌跏贾凳?，所有向左邊滑動一定是負(fù)值。可以得到max一定是0。

那么min的值就是：屏幕的寬度－圖片的張數(shù)*圖片的寬度

圖片的寬度為0.88 * window.innerWidth
屏幕的寬度為window.innerWidth
圖片的張數(shù)為 5

第30秒

如上圖所示，相對于傳統(tǒng)的swipe然后再去觸發(fā)滾動，上面的跟手然后再去校正的體驗(yàn)是更加良好的。那么怎么實(shí)現(xiàn)呢？
首先，AlloyTouch是支持step配置。

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

只要用戶設(shè)置的step，最后運(yùn)動結(jié)束之后，AlloyTouch都會幫用戶校正到最接近的step的整數(shù)倍的位置。

比如上面是100：

如果運(yùn)動的對象停在 120，會被校正到100
如果運(yùn)動的對象停在 151，會被校正到200
如果運(yùn)動的對象停在 281，會被校正到300
如果運(yùn)動的對象停在 21，會被校正到0

第40秒

當(dāng)然這有個問題，比如用戶從0滑倒30，其實(shí)他是想去100，但是會被校正到0!!!

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

to 方法

to(v [, time, easing])

其中time和easing不是必須。time的默認(rèn)值是600.

第50秒

var items = document.querySelectorAll("#nav a");
var scroller = document.querySelector("#carousel-scroller");
Transform(scroller);
new AlloyTouch({
 touch: "#carousel-container",//反饋觸摸的dom
 vertical: false,//不必需，默認(rèn)是true代表監(jiān)聽豎直方向touch
 target: scroller, //運(yùn)動的對象
 property: "translateX", //被運(yùn)動的屬性
 min: window.innerWidth * -3, //不必需,運(yùn)動屬性的最小值
 max: 0, //不必需,滾動屬性的最大值
 step: window.innerWidth,
 inertia: false, //不必需,是否有慣性。默認(rèn)是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");
   }
  }

 }
})

因?yàn)橐还菜膹垐D，所以
min得到的結(jié)果是 window.innerWidth * -3
max的值依然是0
step的值是 window.innerWidth
通過設(shè)置 inertia: false,把慣性運(yùn)動關(guān)掉
注意看touchEnd里面的return false是為了不去計(jì)算手指離開屏幕后的校正位置、慣性運(yùn)動等邏輯。
touchEnd可以拿到當(dāng)前的位置v以及當(dāng)前所處的位置index。
animationEnd是運(yùn)動結(jié)束后的回調(diào)，用來設(shè)置nav的active。當(dāng)然不是所有瀏覽器都支持classList，這里只是為了演示代碼足夠簡潔。
再注意，在touchEnd和animationEnd中能拿到this，也就是AlloyTouch當(dāng)前對象的實(shí)例。其中，
to方法用來運(yùn)動當(dāng)前對象
step是當(dāng)前的步長
還可以拿到currentPage去獲取當(dāng)前所處的頁碼
還能拿到min和max值，得到運(yùn)動的區(qū)間。

最后

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

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

以上就是本文的全部內(nèi)容，希望對大家的學(xué)習(xí)有所幫助，也希望大家多多支持腳本之家。

您可能感興趣的文章: