javascript
html 轮播图_JS拖拽专题(二)——「实战」滑动轮播图的那点事儿
歡迎來到我的JS拖拽專題系列文章,更多精彩內(nèi)容持續(xù)更新中,歡迎關(guān)注 :)
上一章節(jié)我們說到了在js中拖拽的基本原理,即我們在鼠標(biāo)按下的時(shí)候計(jì)算出鼠標(biāo)位置和物理的位置的差值,這個(gè)差值在移動(dòng)的過程中不恒定不變的。所以我們可以根據(jù)鼠標(biāo)的位置計(jì)算出物理的位置以達(dá)到拖拽的效果。
本章目標(biāo)
先來看下我們今天要實(shí)現(xiàn)示例吧!
手動(dòng)滑動(dòng)改變輪播圖
這種效果在我們傳統(tǒng)的web應(yīng)用中經(jīng)常遇到。下面我們就來一步步的解析這個(gè)效果的核心技術(shù)。
布局
一個(gè)父容器,我們將它的寬高設(shè)置為圖片的寬高,容器里面的3張大小一樣的圖片排成一列。
html:
然后需要將ul里面的li元素水平排列,方法有很多,我使用的是CSS3的flex布局。
CSS:
將父容器設(shè)置overflow:hidden,將溢出的內(nèi)容隱藏掉。因?yàn)閡l下面的圖片我們可能是任意個(gè),所以我們要對ul的寬進(jìn)行一個(gè)動(dòng)態(tài)的計(jì)算:
ul.style.width = 一個(gè)li的寬 * li.length;
這里li的寬高和圖片的寬高一樣,不再動(dòng)態(tài)獲取,直接硬編碼了。
var containerW = 520;ul.style.width = li.length * containerW + 'px';到這里,而已基本完成了。接下來就是核心的js拖拽的變形了。
拖拽的變形
我們從gif圖中分析一下:
一、我可以拖著ul左右滑動(dòng),這時(shí)候就要注意了,ul的滑動(dòng)距離剛好就是鼠標(biāo)按下時(shí)和移動(dòng)時(shí)的位置差。即在mousedown的時(shí)候,獲取到鼠標(biāo)的起始位置
ul.onmousedown = e =>{ var startX = e.pageX ;}在輪播圖中,有一個(gè)核心的變量,那就是當(dāng)前顯示的是第幾張圖,我把它定義為iNow
鼠標(biāo)抬起的時(shí)候,如果滑動(dòng)的距離小于li的寬度的1/3時(shí),則不進(jìn)入到下一張圖片中。否則進(jìn)入下一張圖片并且設(shè)置一個(gè)動(dòng)畫,
document.onmouseup = e=>{if(e.pageX - startX > containerW/3){this.iNow++;//上一張}else if(startX - e.pageX > containerW/3){this.iNow--;//下一張}ul.style.transition = '.3s';ul.style.transform = 'translateX('+(this.iNow*containerW)+'px)';document.onmouseup = document.onmousemove = null;}完整的代碼:
這樣一個(gè)簡單的滑動(dòng)輪播圖的效果就實(shí)現(xiàn)了。
總結(jié):
1、輪播圖的基本布局,水平放一排,然后父級設(shè)置溢出隱藏。
2、水平方向上拖拽ul,鼠標(biāo)按下和移動(dòng)產(chǎn)生的距離差值就是當(dāng)前ul的滑動(dòng)距離。
3、當(dāng)松開鼠標(biāo)的時(shí)候,判斷滑動(dòng)距離與圖片的寬的1/3相比,進(jìn)一步判斷圖片是停留在當(dāng)前頁還是上一頁下一頁。(這個(gè)1/3是我自定義的,你們可以根據(jù)需求自行調(diào)整)。
這里是【暢哥聊技術(shù)】JS拖拽專題系列技術(shù)文章,更多精彩內(nèi)容持續(xù)更新中。。。
未完待續(xù)。。。
總結(jié)
以上是生活随笔為你收集整理的html 轮播图_JS拖拽专题(二)——「实战」滑动轮播图的那点事儿的全部內(nèi)容,希望文章能夠幫你解決所遇到的問題。
- 上一篇: android debug bridge
- 下一篇: javascript核心_javascr