vue 实现无限轮播_vue无限轮播插件代码实例

思路：

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

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

好了，贴代码

*{margin: 0;padding: 0}

.wrapper{position: relative;overflow: hidden;}

.wrapper-content{position: absolute;left: 0;z-index: 1;}

.wrapper-content_img{border: none;outline:none;float: left}

.wrapper-buttons{position: absolute;width: 100px;height: 20px;text-align: center;bottom: 3px;z-index: 2;}

.wrapper-button{float: left;width: 20px;height: 20px;border-radius: 10px;background: gray;margin: 0 2.5px;cursor: pointer;}

.wrapper-arrow{position: absolute;width: 40px;height:40px;cursor: pointer;background-color: RGBA(0,0,0,.3); color: #fff;display: none;top:50%;line-height: 40px;font-size: 36px;text-align: center;z-index: 2;}

.wrapper:hover .wrapper-arrow{display: block;background-color: rgba(0,0,0,.7);}

.wrapper-prev{left:10px;}

.wrapper-next{right:10px;}

.wrapper_on{background-color: yellow}

.wrapper_trans{transition: left .3s ease}

<

>

aaa

new Vue({

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){

var node=this.$refs.wrapperContent

var self=this;

var left=parseInt(node.style.left)-offset

this.isTrans=true

node.style.left=left+'px'

setTimeout(function(){

if(left

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(){

var self=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{

var offset=(flag-this.index)*this.originalData.img_width

this.index=flag

this.animate(offset)

}

}

},

mounted(){

/*下面是判断过渡动画是否完成*/

var node=this.$refs.wrapperContent

var transitions = {

'transition':'transitionend',

'OTransition':'oTransitionEnd',

'MozTransition':'transitionend',

'WebkitTransition':'webkitTransitionEnd'

}

var self=this

for(var t in transitions){

if( node.style[t] !== undefined ){

var transitionEvent=transitions[t];

}

}

transitionEvent && node.addEventListener(transitionEvent, function() {

self.clickdelay=false

});

this.play()

}

})

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