利用纯js + transition动画实现移动端web轮播图详解
前言
在上一篇文章中,我们使用tween算法实现了ease-out移动效果,其实更简洁的方法是使用css3的transition动画,下面话不多说了,来一起看看详细的介绍吧。
核心点:
在我们通过代码来移动一段距离的时候,使用transion动画;在手指移动的时候,不使用transition动画.
使用transition实现的动画效果的轮播图js代码不足100行
~function(){ varlastPX=0;//上一次触摸的位置x坐标,需要计算出手指每次移动的一点点距离 varmovex=0;//记录手指move的x方向值 varimgWrap=document.getElementById('imgWrap'); varstartX=0;//开始触摸时手指所在x坐标 varendX=0;//触摸结束时手指所在的x坐标位置 varimgSize=imgWrap.children.length-2;//图片个数 vart1=0;//记录开始触摸的时刻 vart2=0;//记录结束触摸的时刻 varwidth=window.innerWidth;//当前窗口宽度 varnodeList=document.querySelectorAll('#imgWrapimg');//所有轮播图节点数组NodeList //给图片设置合适的left值,注意querySelectorAll返回NodeList,具有forEach方法 nodeList.forEach(function(node,index){ node.style.left=(index-1)*width+'px'; }); /** *移动图片到当前的tIndex索引所在位置 *@param{number}tIndex要显示的图片的索引 **/ functiontoIndex(tIndex){ vardis=-(tIndex*width); //动画移动 imgWrap.style.transform='translate3d('+dis+'px,0,0)'; imgWrap.style.transition='transform.2sease-out'; movex=dis; //索引到最后一张图片,迅速切换索引到同一张图的初始位置 setTimeout(function(){ if(tIndex===imgSize){ imgWrap.style.transform='translate3d(0,0,0)'; imgWrap.style.transition='none'; movex=0; } if(tIndex===-1){ imgWrap.style.transform='translate3d('+width*(1-imgSize)+'px,0,0)'; imgWrap.style.transition='none'; movex=-width*(imgSize-1); } },200); } /** *处理各种触摸事件,包括touchstart,touchend,touchmove,touchcancel *@param{Event}evt回调函数中系统传回的js事件对象 **/ functiontouch(evt){ vartouch=evt.targetTouches[0]; vartar=evt.target; varindex=parseInt(tar.getAttribute('data-index')); if(evt.type==='touchmove'){ vardi=parseInt(touch.pageX-lastPX); endX=touch.pageX; movex+=di; imgWrap.style.webkitTransform='translate3d('+movex+'px,0,0)'; imgWrap.style.transition='none';//移动时避免动画延迟 lastPX=touch.pageX; } if(evt.type==='touchend'){ varminus=endX-startX; t2=newDate().getTime()-t1; if(Math.abs(minus)>0){//有拖动操作 if(Math.abs(minus)500){//拖动距离不够,返回! toIndex(index); }else{//超过一半,看方向 console.log(minus); if(Math.abs(minus)<20){ console.log('距离很短'+minus); toIndex(index); return; } if(minus<0){//endX startX,向右滑动,是上一张 toIndex(index-1) } } }else{//没有拖动操作 } } if(evt.type==='touchstart'){ lastPX=touch.pageX; startX=lastPX; endX=startX; t1=newDate().getTime(); } returnfalse; } imgWrap.addEventListener('touchstart',touch,false); imgWrap.addEventListener('touchmove',touch,false); imgWrap.addEventListener('touchend',touch,false); imgWrap.addEventListener('touchcancel',touch,false); }();
注意事项:
当切换到边界值的图时,应该等到切换动画效果之后再换到相同图内容的位置
所以: 我们使用setTimeout延迟执行无限循环播放替换图位置的操作
至于css和html嘛,还是原来的配方,还是原来的味道~参见这篇文章:https://www.nhooo.com/article/123303.htm
总结
以上就是这篇文章的全部内容了,希望本文的内容对大家的学习或者工作具有一定的参考学习价值,如果有疑问大家可以留言交流,谢谢大家对毛票票的支持。