欢迎来到我的JS拖拽专题系列文章,更多精彩内容持续更新中,欢迎关注 :)
![aa1a8f42e54c87e8a03249b7b3b7b48b.png](https://i-blog.csdnimg.cn/blog_migrate/080d15164c1075b5cf6600117d742e85.jpeg)
上一章节我们说到了在js中拖拽的基本原理,即我们在鼠标按下的时候计算出鼠标位置和物理的位置的差值,这个差值在移动的过程中不恒定不变的。所以我们可以根据鼠标的位置计算出物理的位置以达到拖拽的效果。
本章目标
- 轮播图的基本布局
- 拖拽的变形使用滑动触发图片的移动
先来看下我们今天要实现示例吧!
![451c1a5e7e2801c64a82d0d88ca9f127.gif](https://img-blog.csdnimg.cn/img_convert/451c1a5e7e2801c64a82d0d88ca9f127.gif)
手动滑动改变轮播图
这种效果在我们传统的web应用中经常遇到。下面我们就来一步步的解析这个效果的核心技术。
布局
一个父容器,我们将它的宽高设置为图片的宽高,容器里面的3张大小一样的图片排成一列。
html:
![0771f11ac580a7a39e71dda41bc05ffc.png](https://i-blog.csdnimg.cn/blog_migrate/c66436382c5c4366aff54dfe5d109911.jpeg)
然后需要将ul里面的li元素水平排列,方法有很多,我使用的是CSS3的flex布局。
CSS:
![dcfcc566ed4c8178bb26574140fd3dc9.png](https://i-blog.csdnimg.cn/blog_migrate/318e2fa730e70b284f13d280684c6e75.jpeg)
将父容器设置overflow:hidden,将溢出的内容隐藏掉。因为ul下面的图片我们可能是任意个,所以我们要对ul的宽进行一个动态的计算:
ul.style.width = 一个li的宽 * li.length;
这里li的宽高和图片的宽高一样,不再动态获取,直接硬编码了。
var containerW = 520;ul.style.width = li.length * containerW + 'px';
![e2ea9dfddab11e00980985b9fb282c83.png](https://i-blog.csdnimg.cn/blog_migrate/d14da53234875b02dcfd79dd8a8c95a5.jpeg)
到这里,而已基本完成了。接下来就是核心的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;}
完整的代码:
![708422966f46a9bec88d2f85f7103f19.png](https://i-blog.csdnimg.cn/blog_migrate/604c102c534abc54714687ee086db3de.jpeg)
这样一个简单的滑动轮播图的效果就实现了。
总结:
1、轮播图的基本布局,水平放一排,然后父级设置溢出隐藏。
2、水平方向上拖拽ul,鼠标按下和移动产生的距离差值就是当前ul的滑动距离。
3、当松开鼠标的时候,判断滑动距离与图片的宽的1/3相比,进一步判断图片是停留在当前页还是上一页下一页。(这个1/3是我自定义的,你们可以根据需求自行调整)。
这里是【畅哥聊技术】JS拖拽专题系列技术文章,更多精彩内容持续更新中。。。
未完待续。。。