歡迎來到我的JS拖拽專題系列文章，更多精彩內容持續更新中，歡迎關注 ：)

上一章節我們說到了在js中拖拽的基本原理，即我們在鼠標按下的時候計算出鼠標位置和物理的位置的差值，這個差值在移動的過程中不恒定不變的。所以我們可以根據鼠標的位置計算出物理的位置以達到拖拽的效果。

本章目標

輪播圖的基本布局

拖拽的變形使用滑動觸發圖片的移動

先來看下我們今天要實現示例吧！

手動滑動改變輪播圖

這種效果在我們傳統的web應用中經常遇到。下面我們就來一步步的解析這個效果的核心技術。

布局

一個父容器，我們將它的寬高設置為圖片的寬高，容器里面的3張大小一樣的圖片排成一列。

html:

然后需要將ul里面的li元素水平排列，方法有很多，我使用的是CSS3的flex布局。

CSS：

將父容器設置overflow:hidden，將溢出的內容隱藏掉。因為ul下面的圖片我們可能是任意個，所以我們要對ul的寬進行一個動態的計算：

ul.style.width = 一個li的寬 * li.length;

這里li的寬高和圖片的寬高一樣，不再動態獲取，直接硬編碼了。

var containerW = 520;ul.style.width = li.length * containerW + 'px';

到這里，而已基本完成了。接下來就是核心的js拖拽的變形了。

拖拽的變形

我們從gif圖中分析一下：

一、我可以拖著ul左右滑動，這時候就要注意了，ul的滑動距離剛好就是鼠標按下時和移動時的位置差。即在mousedown的時候，獲取到鼠標的起始位置

ul.onmousedown = e =>{ var startX = e.pageX ;}

在輪播圖中，有一個核心的變量，那就是當前顯示的是第幾張圖，我把它定義為iNow

鼠標抬起的時候，如果滑動的距離小于li的寬度的1/3時，則不進入到下一張圖片中。否則進入下一張圖片并且設置一個動畫，

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;}

完整的代碼：

這樣一個簡單的滑動輪播圖的效果就實現了。

---

總結：

1、輪播圖的基本布局，水平放一排，然后父級設置溢出隱藏。

2、水平方向上拖拽ul,鼠標按下和移動產生的距離差值就是當前ul的滑動距離。

3、當松開鼠標的時候，判斷滑動距離與圖片的寬的1/3相比，進一步判斷圖片是停留在當前頁還是上一頁下一頁。(這個1/3是我自定義的，你們可以根據需求自行調整)。

這里是【暢哥聊技術】JS拖拽專題系列技術文章，更多精彩內容持續更新中。。。

未完待續。。。

總結

以上是生活随笔為你收集整理的html 轮播图_JS拖拽专题(二)——「实战」滑动轮播图的那点事儿的全部內容，希望文章能夠幫你解決所遇到的問題。

如果覺得生活随笔網站內容還不錯，歡迎將生活随笔推薦給好友。