怎么用html5实现触屏版的轮播器
小编给大家分享一下怎么用html5实现触屏版的轮播器,相信大部分人都还不怎么了解,因此分享这篇文章给大家参考一下,希望大家阅读完这篇文章后大有收获,下面让我们一起去了解一下吧!
创新互联主要从事成都网站设计、成都做网站、网页设计、企业做网站、公司建网站等业务。立足成都服务左贡,10多年网站建设经验,价格优惠、服务专业,欢迎来电咨询建站服务:13518219792
大致功能如下:
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
//htmlitem-1