纯css实现轮播效果,怎么实现轮播效果html
进入前端时，分享一下触屏轮播在手机上的实现过程。一般功能如下：
1.支持循环滑动。
2.宽度可以任意设置，不需要和屏幕一样宽。
3.页面可以垂直滚动。
4.您可以设置回调监控元素的开关。
5.纯js，没有任何第三方库
原理
1.假设子元素的宽度。item是375px，使用绝对定位将所有子元素放在父元素中。
2.设置父元素的宽度。carousel到375px，与子元素的宽度相同。项目。
3.为父元素添加触摸事件。转盘：触摸开始、触摸移动、触摸结束。
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.第一个子元素的上一个元素是最后一个元素，最后一个元素的下一个元素是第一个元素。这一步是通过循环链表实现的。
移动时，子元素的transform属性。设置了项而不是父元素。旋转木马。
实现步骤
htmlcss
//html div class= carousel ontuch start= div class= item style= background:# 3b 76c 0 H3 item-1/H3/div div class= item style= background:# 58c 03b；H3 item-2/H3/div div class= item style= background:# c03b 25；H3 item-3/H3/div div class= item style= background:# e0a 718；H3 item-4/H3/div div class= item style= background:# c 03 EAC；H3 item-5/H3/div/div//CSS . carousel { height:50%；位置：相对；溢出：隐藏；}.项{位置：绝对；左：0；top:0；宽度：100%；身高：100%；}js
设置初始状态
首先，实现一个双向链表来维护carousel组件中的元素。
函数节点(数据){ this.data=datathis.prev=nullthis.next=nullthis . index=-1；}//双向循环列表function linklist(){ var _ nodes=[]；this.head=nullthis.last=nullif (typeof this.append！== function ){ linklist . prototype . append=function(node){ if(this . head==null){ this . head=node；this . last=this . head；} else { this . head . prev=node；this . last . next=node；node . prev=this . last；node . next=this . head；this.last=node} node . index=_ nodes . length；//一定要在push之前设置node . index _ nodes . push(node)；}}}有了链表之后，创建一个链表的实例，给链表添加子元素，设置一些初始状态。
var _ container=document . query selector( . container class)；var _ items=document . query selector all( . item class)；var list=loop？new LinkList():new single list()；for(var I=0；i _ items.lengthI){ list . append(new Node(_ items[I])；} var _ prev=null//保存之前显示的元素var _ current=list.head//保存当前显示的元素，默认为第一个元素var _ normal zindex=_ current . data . style . zindex；//不显示元素的z索引值var _ activezindex=_ normalzindex 1；//当前显示元素var _ item width=_ current . data . offsetwidth的z索引值；//子元素宽度position items()；//初始化元素位置zindex项(_ current，_ activezindex)；//将当前元素及其左右元素的z索引加1绑定触摸事件
touchstart事件
当手指被按下时，初始位置被保存。
_ container . addevent listener( touch start ，function(e){//e . prevent default()；//取消对此代码行的注释将阻止页面在此元素内垂直滚动var touch=e . touches[0]；startX=touch.clientX//保存手指按下时的位置startY=touch.clientY_ container . style . webkittransition=“”；//取消动画效果startT=new Date()。getTime()；//记录手指按压的开始时间isMove=falsetransitionItems(_prev，false)；//取消上一个元素的transitionItems(_current，false)；//取消当前元素的过渡}，false)；touchmove事件
手指在屏幕上滑动，页面跟随手指。
_ container . addevent listener( touch move ，function(e){//e . prevent default()；//取消对此代码行的注释将阻止页面在此元素内垂直滚动var touch=e . touches[0]；var deltaX=touch . clientx-startX；//计算手指在X方向滑动的距离var deltaY=touch . clienty-startY；//计算手指在Y方向滑动的距离。//如果X方向的位移大于Y方向的位移，则认为是左右滑动If(math . ABS(deltax)math . ABS(deltay)){ translate=deltax _ item width？_ item width:deltaX；translate=deltaX -_itemWidth？-_ item width:deltaX；//同时移动当前元素及其左右元素Move items(translate)；isMove=true}}，假)；touchend事件
当你的手指离开屏幕时，计算你最终需要停留在哪个页面。
_ container . addevent listener( touch end ，function(e){//e . prevent default()；//取消对此行代码的注释将阻止页面在此元素内垂直滚动//它会滚动吗var isRollback=false//计算手指停留在屏幕上的时间var deltat=newdate()。GetTime()-startt；If (isMove) {//发生左右滑动。//如果停留时间小于300ms，则认为是快速滑行。无论滑动距离是多少，都停留在下一页如果(delta t300){ translate=translate 0？-_ item width:_ item width；}else {//如果滑动距离小于屏幕的50%，返回上一页If(math . ABS(translate)/_ item width 0.5){ is roll=true；}else{ //如果滑动距离大于屏幕的50%，滑动到下一页translate=translate 0？-_ item width:_ item width；} } moveTo(translate，isRollback)；}}，假)；Carousel库
为了方便，我将整个实现过程封装到一个库中，并添加了prev()、next()方法，使用起来非常简单：
script src= lib/carousel . js /scriptCreateCarousel( carousel ， item ，true)。bindTouchEvent()。setitemchandler(onPageChanged)；//参数“carousel”是容器的类名。//参数“item”是子元素的类名。//第三个参数设置是否需要循环播放。真实是图书馆的循环播放。下载地址：http://xiazai.jb51.net/201701/yuanma/Carousel_jb51.rar
这就是本文的全部内容。希望对大家的学习和支持有帮助。
郑重声明：本文由网友发布，不代表盛行IT的观点，版权归原作者所有，仅为传播更多信息之目的，如有侵权请联系，我们将第一时间修改或删除，多谢。