利用纯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){//endXstartX,向右滑动,是上一张
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
总结
以上就是这篇文章的全部内容了，希望本文的内容对大家的学习或者工作具有一定的参考学习价值，如果有疑问大家可以留言交流，谢谢大家对毛票票的支持。