js左右滑动图片轮播（js拖动）

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

js左右滑动图片轮播（js拖动）

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

本章目标

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

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

js左右滑动图片轮播（js拖动）

手动滑动改变轮播图

这种效果在我们传统的web应用中经常遇到。下面我们就来一步步的解析这个效果的核心技术。

布局

一个父容器，我们将它的宽高设置为图片的宽高，容器里面的3张大小一样的图片排成一列。

html:

js左右滑动图片轮播（js拖动）

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

CSS：

js左右滑动图片轮播（js拖动）

将父容器设置overflow:hidden，将溢出的内容隐藏掉。因为ul下面的图片我们可能是任意个，所以我们要对ul的宽进行一个动态的计算：

ul.style.width = 一个li的宽 * li.length;

这里li的宽高和图片的宽高一样，不再动态获取，直接硬编码了。

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

js左右滑动图片轮播（js拖动）

到这里，而已基本完成了。接下来就是核心的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;
}

完整的代码：

js左右滑动图片轮播（js拖动）