html 轮播图_JS拖拽专题(二)——「实战」滑动轮播图的那点事儿

欢迎来到我的JS拖拽专题系列文章，更多精彩内容持续更新中，欢迎关注 ：)

上一章节我们说到了在js中拖拽的基本原理，即我们在鼠标按下的时候计算出鼠标位置和物理的位置的差值，这个差值在移动的过程中不恒定不变的。所以我们可以根据鼠标的位置计算出物理的位置以达到拖拽的效果。

本章目标

1. 轮播图的基本布局
2. 拖拽的变形使用滑动触发图片的移动

先来看下我们今天要实现示例吧！

手动滑动改变轮播图

这种效果在我们传统的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拖拽专题系列技术文章，更多精彩内容持续更新中。。。

未完待续。。。