js实现移动端轮播图滑动切换

2023-07-08 01:11:03 364

本文实例为大家分享了js实现移动端轮播图滑动切换的具体代码，供大家参考，具体内容如下

移动端手势

轮播图分析

1、自动轮播且无缝[定时器、过渡动画]
2、分页器要随着图片的轮播而改变[根据索引切换]
3、滑动效果[touch事件]
4、图片随着分页器变化
5、滑动结束的时候，如果滑动的距离不超过屏幕的1/3，就恢复回去[过渡]
6、滑动结束的时候，如果滑动的距离超过屏幕的1/3，就切换[滑动方向+过渡]]

html页面结构

js部分

/*动态设置过渡*/
varaddTransition=function(ele){
ele.style.transition="all.6s";
ele.style.webkitTransition="all.6s";
};
/*移除过渡效果*/
varremoveTransition=function(ele){
ele.style.transition="none";
ele.style.webkitTransition="none";
};
/*设置容器平移--也就是滑动动画
ele:当前元素
xwidth:平移的距离
*/
varsetTranslateX=function(ele,xwidth){
ele.style.transform="translateX("+xwidth+"px)";
ele.style.webkitTransform="translateX("+xwidth+"px)";
}

varbanner=function(){
/**轮播图分析*/
/**1自动轮播且无缝[定时器、过渡动画]
*2点要随着图片的轮播而改变[根据索引切换]
*3滑动效果[touch事件]
*4图片随着点而变化
*5滑动结束的时候，如果滑动的距离不超过屏幕的1/3，就恢复回去[过渡]
*6滑动结束的时候，如果滑动的距离超过屏幕的1/3，就切换[滑动方向+过渡]]
*/
vartimer=''
/*封装定时器函数*/
varstartInterval=function(){
timer=setInterval(function(){
index++;//基于索引做位移
addTransition(imgBox);//为轮播图片组的ul设置过渡函数
setTranslateX(imgBox,-index*width);//根据当前索引值计算平移的距离
},2000);
}
varbanner=document.querySelector(".jd_banner");
varwidth=banner.offsetWidth;//屏幕的宽度
varimgBox=banner.querySelector("ul:first-child");//轮播图片ul
varlength=imgBox.querySelectorAll("li").length;//图片的个数
varpointBox=banner.querySelector("ul:last-child");//分页器ul
varpoints=pointBox.querySelectorAll("li");//分页器集合

varindex=1;//初始化索引，由于要无缝衔接，索引从1开始
startInterval();

/*transitionend事件：当元素过渡动画结束后执行
每次轮播动画结束后，判断当前索引值
*/
imgBox.addEventListener("transitionend",function(){
if(index>=length-1){
index=1;
//清过渡，瞬间定位imgBox
removeTransition(imgBox);
setTranslateX(imgBox,-index*width);
}
//滑动的时候也需要无缝
elseif(index<=0){
index=8;
removeTransition(imgBox);
setTranslateX(imgBox,-index*width);
}
showPoint(index-1);//改变分页器状态
});

varshowPoint=function(index){
for(vari=0;iwidth/3){
//切换
if(distanceX>0){
//上一张
index=index-1;
}else{
//下一张
index=index+1;
}
addTransition(imgBox);//设置过渡动画
setTranslateX(imgBox,-index*width);
if(index>=9){
index=1;
}
if(index<=0){
index=8;
}
showPoint(index-1);

}else{
//不满足滑动条件，回退到之前的状态
addTransition(imgBox);
setTranslateX(imgBox,-index*width);
showPoint(index-1);
}
}
//****最好做一次参数的重置
startX=0;
distanceX=0;
isMove=false;
//******为了严谨，再清一次定时器
clearInterval(timer)
//加上定时器
startInterval();
});
};

总结

原生js实现滑动切换的原理主要还是利用移动端的手势事件

touchstart当手指触摸屏幕时触发
touchmove当手指在屏幕中滑动的时候触发
touchend当手指离开屏幕时触发

利用touch相关事件实现移动端常见滑动效果和移动端常见的手势事件。

而swiper插件的底层实现原理也是这个，因此，为了快速开发，还是使用swiper插件最好

以上就是本文的全部内容，希望对大家的学习有所帮助，也希望大家多多支持毛票票。

声明：本文内容来源于网络，版权归原作者所有，内容由互联网用户自发贡献自行上传，本网站不拥有所有权，未作人工编辑处理，也不承担相关法律责任。如果您发现有涉嫌版权的内容，欢迎发送邮件至：czq8825#qq.com（发邮件时，请将#更换为@）进行举报，并提供相关证据，一经查实，本站将立刻删除涉嫌侵权内容。

js实现移动端轮播图滑动切换

热门推荐

随机推荐