好资源导航 » 文章资讯 » vue无限轮播插件代码实例

vue无限轮播插件代码实例

2023-08-23 16:38:04 95

思路：

要实现无限轮播，需要在轮播图前后各加一张图片，加在前面的是轮播图的最后一张图片（重复的），加在后面的是轮播图的第一张图片（重复的）。例：

然后再用left来控制滑动，当顺向到达alt为4的图片时，下一张滑到第六张图片，alt为1，同时改变index为1.然后立即将left移到第二张图片，alt为1那张。这样就不会被察觉

好了，贴代码

< >

aaa newVue({ el:'#app', data:{ originalData:{ img_width:350, img_height:350, btn_width:40, btn_height:40, num:4, delay:300 }, isTrans:true,//因为到最后一张图片，index为1时，需要立即跳到第二张index也为1的图片，这个用来是否给出transition index:1, timer:null,//setInterval clickdelay:false//用来防止连续点击 }, methods:{ next(){ if(this.clickdelay){ return } this.clickdelay=true if(this.index==this.originalData.num){ this.index=1 }else{ this.index+=1 } this.animate(this.originalData.img_width) }, prev(){ if(this.clickdelay){ return } this.clickdelay=true if(this.index==1){ this.index=this.originalData.num }else{ this.index-=1 } this.animate(-this.originalData.img_width) }, animate(offset){ varnode=this.$refs.wrapperContent varself=this; varleft=parseInt(node.style.left)-offset this.isTrans=true node.style.left=left+'px' setTimeout(function(){ if(left<-(self.originalData.num*self.originalData.img_width)){ self.isTrans=false node.style.left=-self.originalData.img_width+'px' self.clickdelay=false//当到达最后一张图片时 } if(left>-100){ self.isTrans=false node.style.left=-self.originalData.num*self.originalData.img_width+'px' self.clickdelay=false//当到达第一张图片时 } },this.originalData.delay) }, play(){ varself=this; this.timer=setInterval(function(){ self.next() },2000) }, stop(){ this.clickdelay=false//用来防止连续点击 clearInterval(this.timer) this.timer=null }, turnTo(flag){ if(flag==this.index){ return }else{ varoffset=(flag-this.index)*this.originalData.img_width this.index=flag this.animate(offset) } } }, mounted(){ /*下面是判断过渡动画是否完成*/ varnode=this.$refs.wrapperContent vartransitions={ 'transition':'transitionend', 'OTransition':'oTransitionEnd', 'MozTransition':'transitionend', 'WebkitTransition':'webkitTransitionEnd' } varself=this for(vartintransitions){ if(node.style[t]!==undefined){ vartransitionEvent=transitions[t]; } } transitionEvent&&node.addEventListener(transitionEvent,function(){ self.clickdelay=false }); this.play() } })

以上所述是小编给大家介绍的vue无限轮播插件详解整合，希望对大家有所帮助，如果大家有任何疑问请给我留言，小编会及时回复大家的。在此也非常感谢大家对毛票票网站的支持！

返回顶部
514930285
czq8825@qq.com

vue无限轮播插件代码实例

热门推荐

随机推荐