您好,登錄后才能下訂單哦!
小編這次要給大家分享的是詳解JS組件庫AlloyTouch如何實(shí)現(xiàn)圖片輪播,文章內(nèi)容豐富,感興趣的小伙伴可以來了解一下,希望大家閱讀完這篇文章之后能夠有所收獲。
輪播圖也涉及到觸摸和觸摸反饋,同時(shí),AlloyTouch可以把慣性運(yùn)動(dòng)打開或者關(guān)閉,并且設(shè)置min和max為運(yùn)動(dòng)區(qū)域,超出會(huì)自動(dòng)回彈。
除了一般的豎向滾動(dòng),AlloyTouch也可以支持橫向滾動(dòng),甚至任何屬性的運(yùn)動(dòng),因?yàn)樗脑O(shè)計(jì)的本質(zhì)就是屬性無關(guān),觸摸可以反饋到任何屬性的運(yùn)動(dòng)。所以AlloyTouch制作各種各樣的輪播組件還是得心應(yīng)手。
第一種輪播圖如上圖所示。下面開始實(shí)現(xiàn)的過程。
第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,所以用戶的屏幕里可以看到一張多一點(diǎn)的圖片,給用戶可以橫向滑動(dòng)查看的感覺。
第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)動(dòng)的對(duì)象 property: "translateX", //被運(yùn)動(dòng)的屬性 min:0.88 * window.innerWidth * -5 + window.innerWidth, max: 0 })
這里最大的難點(diǎn)(其實(shí)也沒有什么難的),就是就是min的值。因?yàn)槌跏贾凳?,所有向左邊滑動(dòng)一定是負(fù)值??梢缘玫絤ax一定是0。
那么min的值就是: 屏幕的寬度-圖片的張數(shù)*圖片的寬度
第30秒
如上圖所示,相對(duì)于傳統(tǒng)的swipe然后再去觸發(fā)滾動(dòng),上面的跟手然后再去校正的體驗(yàn)是更加良好的。那么怎么實(shí)現(xiàn)呢?
首先,AlloyTouch是支持step配置。
new AlloyTouch({
step: 100,
...
...
...
})
只要用戶設(shè)置的step,最后運(yùn)動(dòng)結(jié)束之后,AlloyTouch都會(huì)幫用戶校正到最接近的step的整數(shù)倍的位置。
比如上面是100:
第40秒
當(dāng)然這有個(gè)問題,比如用戶從0滑倒30,其實(shí)他是想去100,但是會(huì)被校正到0!!!
所以光使用校正是不夠。還需要一個(gè)API去阻止校正自己去注入邏輯滾動(dòng)相應(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)動(dòng)的對(duì)象 property: "translateX", //被運(yùn)動(dòng)的屬性 min: window.innerWidth * -3, //不必需,運(yùn)動(dòng)屬性的最小值 max: 0, //不必需,滾動(dòng)屬性的最大值 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)動(dòng)關(guān)掉
注意看touchEnd里面的return false是為了不去計(jì)算手指離開屏幕后的校正位置、慣性運(yùn)動(dòng)等邏輯。
touchEnd可以拿到當(dāng)前的位置v以及當(dāng)前所處的位置index。
animationEnd是運(yùn)動(dòng)結(jié)束后的回調(diào),用來設(shè)置nav的active。當(dāng)然不是所有瀏覽器都支持classList,這里只是為了演示代碼足夠簡潔。
再注意,在touchEnd和animationEnd中能拿到this,也就是AlloyTouch當(dāng)前對(duì)象的實(shí)例。其中,
to方法用來運(yùn)動(dòng)當(dāng)前對(duì)象
step是當(dāng)前的步長
還可以拿到currentPage去獲取當(dāng)前所處的頁碼
還能拿到min和max值,得到運(yùn)動(dòng)的區(qū)間。
看完這篇關(guān)于詳解JS組件庫AlloyTouch如何實(shí)現(xiàn)圖片輪播的文章,如果覺得文章內(nèi)容寫得不錯(cuò)的話,可以把它分享出去給更多人看到。
免責(zé)聲明:本站發(fā)布的內(nèi)容(圖片、視頻和文字)以原創(chuàng)、轉(zhuǎn)載和分享為主,文章觀點(diǎn)不代表本網(wǎng)站立場,如果涉及侵權(quán)請(qǐng)聯(lián)系站長郵箱:is@yisu.com進(jìn)行舉報(bào),并提供相關(guān)證據(jù),一經(jīng)查實(shí),將立刻刪除涉嫌侵權(quán)內(nèi)容。