可作为触屏的图片轮播器，tab组件等。

具体实现过程可参考如何用H5实现一个触屏版的轮播器？

<script src="lib/carousel.js"></script>

<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>

.carousel{
  height: 50%;
  position: relative;
  overflow: hidden;
}

.item {
  position: absolute;
  left: 0;
  top: 0;
  width: 100%;
  height: 100%;
}

利用绝对定位将子元素依次重叠在父元素内。

CreateCarousel("carousel", "item", true).bindTouchEvent().setItemChangedHandler(onPageChanged);

carousel为父元素的类名，item为子元素的类名，注意必须使用类名且类名前没有点“.”

1. 假设子元素.item的width为375px，使用绝对定位将所有子元素放在父元素内
2. 将父元素.carousel的width设置为375px，与子元素.item宽度相同
3. 为父元素.carousel添加触摸事件：touchstart, touchmove, touchend
4. 手指按下时，保存初始位置（clientX）
5. 手指滑动时，通过滑动距离判断滑动的方向： 1. 手指向左滑动，则同时移动当前元素和当前元素右边的元素 2. 手指向右滑动，则同时移动当前元素和当前元素左边的元素
6. 手指抬起时，通过滑动距离判断是否切换到下一页 1. 移动距离未超过子元素宽度的50%，将当前页面回滚到初始位置，不切换当前元素。 2. 移动距离超过子元素宽度的50%，切换当前元素为下一个元素。 3. 将当前元素的transform属性设置为translate3d(0px, 0px, 0px)，并将z-index属性+1 4. 将下一个子元素的transform属性设置为translate3d(375px, 0px, 0px)，并将z-index属性+1 5. 将上一个子元素的transform属性设置为translate3d(-375px, 0px, 0px)，并将z-index属性+1 6. 将其他所有子元素的z-index属性设置为默认值
7. 第一个子元素的上一个元素是最后一个元素，最后一个元素的下一个元素是第一个元素，该步骤通过循环链表实现。

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

创建轮播组件，该方法会返回一个对象，假设命名为carousel，后面介绍的方法都是该对象的成员方法。
containerClass: 父元素的类名
itemClass: 子元素的类名
loop: 是否循环播放

绑定触摸事件，使元素可以跟随手指滑动，carousel的成员方法

滑动到上一元素，carousel的成员方法

滑动到下一元素，carousel的成员方法

设置元素切换后的回调，该回调函数接收两个参数：pervIndex, curIndex
pervIndex: 之前显示元素的索引
curIndex: 当前显示元素的索引

将父级元素.carousel的width设置为子元素.item的宽度*子元素的个数，并将子元素横向依次排列，然后为父元素绑定touchstart，touchmove，touchend三个事件，通过计算pageX属性(既触摸点在整个父元素的上的位置)来移动.carousel元素，.carousel元素的移动通过translate3d实现，之所以使用3d变换，是为了充分利用GPU以提高性能。在实现的过程中，有两点需要特别注意：

1. 不能在touchstart，touchmove，touchend三个事件的事件处理程序内调用e.preventDefault()，否则.carousel元素会阻止页面的纵向滚动。
2. 必须为.carousel元素的父元素.carousel-wrapper设置overflow: hidden属性，并设置其width为子元素.item的width，否则整个页面会横向滚动。

H5单页面手势滑屏切换原理