利用H5实现一个轮播器触屏版的案例

　　介绍

小编给大家分享一下利用H5实现一个轮播器触屏版的案例,希望大家阅读完这篇文章后大所收获、下面让我们一起去探讨吧!

初入前端,分享一下手机上触屏版轮播器的实现过程,大致功能如下:

<李>

支持循环滑动

<李>

宽度可任意设置,不需要与屏幕等宽

<李>

页面可纵向滚动

<李>

可设置回调监听元素的切换

<李>

纯js,不借助任何第三方库

原理

<李>

假设子元素<代码> .item 的<代码> 宽度为375像素,使用绝对定位将所有子元素放在父元素内

<李>

将父元素<代码> .carousel 的<代码> 宽度设置为375 px,与子元素<代码> .item 宽度相同

<李>

为父元素<代码>。旋转木马> touchstart ,<代码> touchmove ,<代码> touchend

<李>

手指按下时,保存初始位置(<代码> clientX> <李>

手指滑动时,通过滑动距离判断滑动的方向:

<李>

手指向左滑动,则同时移动当前元素和当前元素右边的元素

<李>

手指向右滑动,则同时移动当前元素和当前元素左边的元素

<李>

手指抬起时,通过滑动距离判断是否切换到下一页

<李>

移动距离未超过子元素宽度的50%,将当前页面回滚到初始位置,不切换当前元素。

<李>

移动距离超过子元素宽度的50%,切换当前元素为下一个元素。

<李>

将当前元素的<代码> 属转换性设置为<代码> translate3d (0 px, 0 px, 0 px)> z - index 属性+ 1

<李>

将下一个子元素的<代码> 属转换性设置为<代码> translate3d (375 px, 0 px, 0 px)> z - index 属性+ 1

<李>

将上一个子元素的<代码> 属转换性设置为<代码> translate3d (-375 px, 0 px, 0 px)> z - index 属性+ 1

<李>

将其他所有子元素的z - index <代码> 属性设置为默认值

<李>

第一个子元素的上一个元素是最后一个元素,最后一个元素的下一个元素是第一个元素,该步骤通过循环链表实现。

移动时设置的是子元素.item属的变换性,而不是父元素<代码> .carousel

实现步骤

html& css

//html 　　类& lt; p=癱arousel">函数节点(数据){ 　　这一点。数据=https://www.yisu.com/zixun/data; 　　这一点。prev=零; 　　这一点。下一个=零; 　　这一点。指数=1; 　　}//双向循环列的表 　　函数LinkList () { 　　var _nodes=[]; 　　这一点。头=零; 　　这一点。去年=零; 　　 　　如果(typeof。追加!==昂?{ 　　LinkList.prototype。附加=function(节点){ 　　如果这一点。头==null) { 　　这一点。头=节点; 　　这一点。去年=this.head; 　　} 　　其他{ 　　this.head。prev=节点; 　　this.last。下一个=节点; 　　 　　节点。prev=this.last; 　　节点。下一个=this.head; 　　 　　这一点。去年=节点; 　　} 　　 　　节点。指数=_nodes.length;//务必在推动前设置node.index 　　_nodes.push(节点); 　　} 　　} 　　}

有了链表之后,创建一个链表实例,将子元素添加进链表内,并设置一些初始状态

 var _container=document.querySelector (“!”+ containerClass);
　　var _items=document.querySelectorAll (“!”+ itemClass);
　　
　　var=列表循环?新的LinkList():新SingleList ();
　　(var=0;我& lt;_items.length;我+ +){
　　列表。追加(新节点(_items[我]));
　　}
　　
　　var _prev=零;//保存之前显示的元素
　　var _current=list.head;//保存当前显示的元素,默认为第一个元素
　　
　　var _normalZIndex=_current.data.style.zIndex;//未显示元素的z - index值
　　var _activeZIndex=_normalZIndex + 1;//当前显示元素的z - index值
　　
　　var _itemWidth=_current.data.offsetWidth;//子元素宽度
　　
　　positionItems ();//初始化元素位置
　　zindexItems (_current _activeZIndex);//将当前元素及其左右元素的z - index加1

绑定触摸事件

touchstart事件

手指按下时,保存初始位置

_container.addEventListener (“touchstart",函数(e) {//e.preventDefault();//取消此行代码的注释会在该元素内阻止页面纵向滚动 　　var=联系e.touches [0]; 　　startX=touch.clientX;//保存手指按下时的位置 　　startY=touch.clientY; 　　_container.style。webkitTransition=?“;//取消动画效果 　　.getTime startT=new日期()();//记录手指按下的开始时间 　　isMove=false; 　　transitionItems (_prev假);//取消之前元素的过渡 　　transitionItems (_current假);//取消当前元素的过渡 　　},假);

利用H5实现一个轮播器触屏版的案例