轮播图以及绝对定位元素的自我理解

移动端的轮播图

在移动端的轮播图我们常常用css3的过渡动画来实现
说实在的这是我第一次写移动端的轮播图 也是我第一次使用touch事件以及监听transitionend事件 刚开始老是错
现在做一次总结
1：明白轮播图的原理
我们知道轮播图就是一个展示区 一个候选区 展示区利用overflow: hiddenl;来控制展示区域的大小，让候选区不停地向一个方向移动
我们需要在候选区的首尾添加一个最后一个第一个元素的附属元素
这是为了让我们在无缝播放图片时到达临界点瞬间往回拉 让用户感觉不到回拉的过程
2：我们需要监听过渡结束这个动作 当动画从1-2-3-4-5-1就是5-1这个动作的时候 我们在过渡动画结束的时候将播放的索引设置为1 这里我们主要是监听transitionend事件 异步更新视图 而且在往回拉的时候要将过渡动画清除
不懂的可以看这个DEMO
3：我们监听过渡结束是异步的 所以我们的过渡时间 必须比设置的定时器的时间短 否则监听不到这个事件
狠狠地点击吧

绝对定位对宽度的影响

还是今天写轮播图遇见的 在我的印象里 div元素是块级元素 它的宽度默认是100% 在我给元素