微客导航 » 文章资讯 » vue自定义js图片碎片轮播图切换效果的实现代码

vue自定义js图片碎片轮播图切换效果的实现代码

2023-08-24 03:59:04 177

定义一个banner.js文件，代码如下

;window.requestAnimationFrame=window.requestAnimationFrame||function(a){returnsetTimeout(a,1000/60)};
window.cancelAnimationFrame=window.cancelAnimationFrame||clearTimeout;
varFragmentBanner=function(option){
//实例化时，可传的参数
this.whiteList=['container','controller','size','imgs','size','grid','index','fnTime','boxTime','type'];
//容器将包容控制器
this.container='.banner';
//默认的控制器
this.controller={
view:'.banner-view',
btn:'.banner-btn',
num:'.banner-number',
progre:'.banner-progres'
};
//栅格行*列
this.grid={
line:5,
list:10
};
//容器的大小
this.size={
width:1200,
height:675,
};
//切换类型
this.type=1;
//索引位置
this.index=0;
//函数每次切换时间
this.fnTime=5000;
//栅格每次运动时间
this.boxTime=2000;
//栅格运动结束的时间
this.activeTime=newDate();
for(vara=0,attrLenght=this.whiteList.length;a=0;b--){
varoB=document.createElement('span');
(b)?oB.innerHTML='<':oB.innerHTML='>';
oB.setIndex=b;
oB.onclick=function(obj){
show({
switch:true,
change:obj.setIndex==0
});
}.bind(this,oB);
this.elem.btn.appendChild(oB);
}
//数量
for(varn=0,nL=this.imgs.length;n=0;p--){
varoP=document.createElement('i');
setCss(oP,{
width:0,
backgroundColor:p?'#00c3ff':'#ffc300'
});
this.elem.progre.appendChild(oP);
this.progre.push(oP);
}
//显示动画
show();
this.elem.numFind[this.index].className='on';
}
functionsetCss(obj,json){
for(cinjson){
if(c=='opacity'){
obj.style.opacity=c;
obj.style.filter="alpha(opacity="+(json[c]*100)+")";
}else{
obj.style[c]=json[c];
}
}
returnthis;
}
functionshow(order){
order=order||{};
if(newDate()>=this.activeTime){
this.elem.numFind[this.index].className='';
//下次播放动画时候的进度条
setCss(this.progre[1],{width:0})
anime(this.progre[1],{
width:this.size.width
},this.fnTime,function(){
show({
switch:true,
change:true
});
}.bind(this));
varstatus=true,
activeTime=0;
for(vari=0,iL=this.elem.viewBox.length;i=endTime[0]){
endTime=endTime[1];
goTime=newDate();
ref();
}else{
obj.timer=requestAnimationFrame(delayFn);
}
})();
}else{
ref();
}
functionref(){
varprop=(newDate()-goTime)/endTime;
(prop>=1)?prop=1:obj.timer=requestAnimationFrame(ref);
for(varkeyinstart){
varval=-end[key]*prop*(prop-2)+start[key];

if(key=='opacity'){

obj.style.opacity=val;
obj.style.filter="alpha(opacity="+(val*100)+")";
}else{

obj.style[key]=val+'px';
}
}

(prop===1)&&callback&&callback.call(obj);
};
}
module.exports.FragmentBanner=FragmentBanner;

在需要的组件里面引入改js

import{FragmentBanner}from'../../../static/js/banner.js'

使用方式如下

//html代码

//css样式 //js的引用 this.obj={ container:'#banner1',//选择容器必选 imgs:['https://www.xuanfengge.com/wp-content/themes/lee3.0/dist/img/banner/1.0bd56759.jpg','https://www.xuanfengge.com/wp-content/themes/lee3.0/dist/img/banner/6.c6b4ec87.jpg'],//图片集合必选 size:{ width:1200, height:300 },//容器的大小可选 //行数与列数可选 grid:{ line:12, list:14 }, index:0,//图片集合的索引位置可选 type:2,//切换类型1，2可选 boxTime:5000,//小方块来回运动的时长可选 fnTime:10000//banner切换的时长可选 } mounted(){ FragmentBanner(this.obj); }

总结

以上所述是小编给大家介绍的vue自定义js图片碎片轮播图切换效果的实现代码,希望对大家有所帮助，如果大家有任何疑问请给我留言，小编会及时回复大家的。在此也非常感谢大家对毛票票网站的支持！
如果你觉得本文对你有帮助，欢迎转载，烦请注明出处，谢谢！

返回顶部
3162201930
czq8825@qq.com

vue自定义js图片碎片轮播图切换效果的实现代码

热门推荐

随机推荐