手写swiper组件基本原理

主要使用touchstart,touchmove,touchend事件

touchstart时记录用户触摸点的x,y坐标,存入数组[x,y],将slide Container的transition设置为0s(默认有transition: all 0s ease 0s)

touchmove事件也会进行触摸位置移动,

触摸的距离len为用触摸点的x坐标e.touches[0].clientX减去touchstart时记录的数组里的x坐标.(得出的len为负值)

移动的位置为:

负的slide container的宽度clientWidth*currentIndex + len

touchend事件

当不是第一或者最后一张的时候,currentIndex加1,设置transition时间,

设置移动距离distance为itemWidth * currentIndex,设置transform的translate为(-distance px,0),其中itemWidth为slidecontainer的宽度

导航小圆点

初始化的时候创建一个数组,数组长度为slider的长度

根据currentIndex进行样式变换,currentIndex跟当前的小圆点index一致的时候,添加特殊的class,比如背景色,更大的width等。

你可能感兴趣的:(Javascript)