版权声明:本文为博主原创文章未经博主允许不得转载。 /u/article/details/
如今移动端web页面在市场上也是占有相当大的比例,而移动端的轮播图效果也是很常见的今天我就来记录下關于实现一组适用于移动端的可用手指进行拨动切换轮播图的效果。
这个效果的主要技术点依托于触屏设备特有的touch事件;好了接下来就進入主题吧。
1. 这里强调的是记得给html加上viewport这个适口属性
2. 由于在拨动第一张图片以及最后一张图片的时候需要切换到最后一张以及第一张,偠想达到理想效果需要给第一张图片前面加上最后一张图片,而在最后一张图片后加上第一张图片
3. f_l代表的是左浮动
- 注意,此处并没有加上常规的reset样式代码
最后是最最重要的js代码啦
1. transitionend 过渡结束后触发的效果在这儿主要是保证图片切换到最后一张我们手动增加的图片完成的瞬间,切换回到真正的第一张图片处;