如何用H5实现一个触屏版的轮播器的实例

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

1、支持循环滑动

2、宽度可任意设置，不需要与屏幕等宽

3、页面可纵向滚动

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

5、纯js，不借助任何第三方库

原理

1、假设子元素.item的width为375px，使用绝对定位将所有子元素放在父元素内

2、将父元素.carousel的width设置为375px，与子元素.item宽度相同

3、为父元素.carousel添加触摸事件：touchstart, touchmove, touchend

4、手指按下时，保存初始位置（clientX）

5、手指滑动时，通过滑动距离判断滑动的方向：

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

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

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

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

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

③将当前元素的transform属性设置为translate3d(0px, 0px, 0px)，并将z-index属性+1

④将下一个子元素的transform属性设置为translate3d(375px, 0px, 0px)，并将z-index属性+1

⑤将上一个子元素的transform属性设置为translate3d(-375px, 0px, 0px)，并将z-index属性+1

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

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

移动时设置的是子元素.item的transform属性，而不是父元素.carousel

实现步骤

html&css

//html
<div class="carousel" ontouchstart="" >
<div class="item" style="background: #3b76c0" >
<h3 >item-1</h3>
</div>
<div class="item" style="background: #58c03b;">
<h3>item-2</h3>
</div>
<div class="item" style="background: #c03b25;">
<h3>item-3</h3>
</div>
<div class="item" style="background: #e0a718;">
<h3>item-4</h3>
</div>
<div class="item" style="background: #c03eac;">
<h3>item-5</h3>
</div>
</div>

//css
.carousel{
height: 50%;
position: relative;
overflow: hidden;
}
.item {
position: absolute;
left: 0;
top: 0;
width: 100%;
height: 100%;
}

js

设置初始状态

首先实现一个双向链表，用于维护轮播组件中的元素。