欢迎来到我的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拖拽专题(二)——「实战」滑动轮播图的那点事儿相关推荐

jquery 手指滑动多半屏_JS拖拽专题(五)——「玩出花儿来」移动端滑动事件的封装...
欢迎来到我的JS拖拽专题系列文章,本章节将是拖拽系列的最后一篇.感谢大家的支持^_^ 上一章节我们说到了拖拽让图片相互之间交换位置,相对来说是一个比较综合的示例,涉及到了矩形的碰撞检测,勾股定理计算两 ...
React造轮子：拖拽排序组件「Dragact」
先来一张图看看: 项目地址:Github地址 (无耻求星!) 在线观看(第一次加载需要等几秒):预览地址说起来不容易,人在国外没有过年一说,但是毕竟也是中国年,虽然不放假,但是家里总会主内一顿丰盛的 ...
JS组件系列——Bootstrap Table 表格行拖拽（二：多行拖拽）
原文:JS组件系列--Bootstrap Table 表格行拖拽(二:多行拖拽) 前言:前天刚写了篇JS组件系列--Bootstrap Table 表格行拖拽,今天接到新的需要,需要在之前表格行拖拽的 ...
实现可拖拽，拉伸，吸附功能的甘特图(时间/任务表)
最近应为业务需求需要开发一个任务调度后台,实现一个甘特图( 类似上学时候的课程表,'时间/课程/代课老师' 转换为: "时间/任务/执行人'").参考图片: 每一行的00:00到2 ...
vue使用svg画拓扑图（关系图）拖拽缩放
概述项目刚开始用的echarts画的拓扑图,echarts有个关系图可以直接画出来,但是上个前端在拖拽功能上留了bug,我眼睛都快看瞎了,都没找出来哪里出问题,还找了各种文章借鉴学习都没搞定后来跑 ...
html元素拖拽预览图,HTML5拖拽上传图片预览
1.文件API:(File API) file类型的的表单控件选择的每一个文件都是一个file对象,而FileList对象则是这些file对象的集合列表,代表所选择的所有文件.file对象继承于Blo ...
使用echarts实现类似股票k图可拖拽可悬浮十字线
实现难点需要悬浮出现十字线,再次点击后可拖拽点击屏幕后鼠标悬浮实现思路点击折线图屏幕后开启或者开启可拖拽 chartDomBig.getZr().off("click");// ...
html页面展示关系图,可拖拽的html5人物关系图代码
一款可拖拽的html5人物关系图代码,可以显示预设的人物头像.人物的关系等,可以鼠标拖拽来自由排列人物顺序,可以指定不同关系的连线样式. 查看演示下载资源: 33 次下载资源下载积分: 20 积 ...
html组态图动态拖拽,基于HTML5的Drag and Drop生成图片Base64信息
HTML5的Drag and Drop是很不错的功能,网上使用例子较多如 http://html5demos.com/drag ,但这些例子大部分没实际用途,本文将搞个有点使用价值的例子,通过Drag ...

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

本章目标

布局

拖拽的变形

总结：

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

最新文章

热门文章