可作为触屏的图片轮播器,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为子元素的类名,注意必须使用类名且类名前没有点“.”
- 假设子元素
.item
的width
为375px,使用绝对定位将所有子元素放在父元素内 - 将父元素
.carousel
的width
设置为375px,与子元素.item
宽度相同 - 为父元素
.carousel
添加触摸事件:touchstart
,touchmove
,touchend
- 手指按下时,保存初始位置(
clientX
) - 手指滑动时,通过滑动距离判断滑动的方向: 1. 手指向左滑动,则同时移动当前元素和当前元素右边的元素 2. 手指向右滑动,则同时移动当前元素和当前元素左边的元素
- 手指抬起时,通过滑动距离判断是否切换到下一页
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
属性设置为默认值 - 第一个子元素的上一个元素是最后一个元素,最后一个元素的下一个元素是第一个元素,该步骤通过循环链表实现。
移动时设置的是子元素.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以提高性能。在实现的过程中,有两点需要特别注意:
- 不能在
touchstart,touchmove,touchend
三个事件的事件处理程序内调用e.preventDefault()
,否则.carousel
元素会阻止页面的纵向滚动。 - 必须为
.carousel
元素的父元素.carousel-wrapper
设置overflow: hidden
属性,并设置其width
为子元素.item
的width
,否则整个页面会横向滚动。