歡迎來到我的JS拖拽專題系列文章，更多精彩內(nèi)容持續(xù)更新中，歡迎關(guān)注 ：)

上一章節(jié)我們說到了在js中拖拽的基本原理，即我們在鼠標(biāo)按下的時(shí)候計(jì)算出鼠標(biāo)位置和物理的位置的差值，這個(gè)差值在移動(dòng)的過程中不恒定不變的。所以我們可以根據(jù)鼠標(biāo)的位置計(jì)算出物理的位置以達(dá)到拖拽的效果。

本章目標(biāo)

輪播圖的基本布局

拖拽的變形使用滑動(dòng)觸發(fā)圖片的移動(dòng)

先來看下我們今天要實(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)容，希望文章能夠幫你解決所遇到的問題。

如果覺得生活随笔網(wǎng)站內(nèi)容還不錯(cuò)，歡迎將生活随笔推薦給好友。