溫馨提示×
您好，登錄后才能下訂單哦！
點擊 登錄注冊 即表示同意《億速云用戶服務(wù)條款》
您好，登錄后才能下訂單哦！
這篇文章給大家介紹vue中怎么實現(xiàn)一個無限輪播插件，內(nèi)容非常詳細(xì)，感興趣的小伙伴們可以參考借鑒，希望對大家能有所幫助。
思路：
要實現(xiàn)無限輪播，需要在輪播圖前后各加一張圖片，加在前面的是輪播圖的最后一張圖片（重復(fù)的），加在后面的是輪播圖的第一張圖片（重復(fù)的）。例：
<div class="wrapper-content"> <img class="wrapper-content_img" alt="4" src="img/4.jpg"/> <img class="wrapper-content_img" alt="1" src="img/1.jpg"/> <img class="wrapper-content_img" alt="2" src="img/2.jpg"/> <img class="wrapper-content_img" alt="3" src="img/3.jpg" /> <img class="wrapper-content_img" alt="4" src="img/4.jpg" /> <img class="wrapper-content_img" alt="1" src="img/1.jpg" /> </div>
然后再用left來控制滑動，當(dāng)順向到達(dá)alt為4的圖片時，下一張滑到第六張圖片，alt為1，同時改變index為1.然后立即將left移到第二張圖片，alt為1那張。這樣就不會被察覺
好了，貼代碼
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="utf-8">
<style>
*{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}
</style>
</head>
<body>
<div id="app">
<div class="wrapper" : @mouseover="stop" @mouseout="play">
<div class="wrapper-content" :class="{wrapper_trans:isTrans}" : ref="wrapperContent">
<img class="wrapper-content_img" alt="4" src="img/4.jpg" :/>
<img class="wrapper-content_img" alt="1" src="img/1.jpg" :/>
<img class="wrapper-content_img" alt="2" src="img/2.jpg" :/>
<img class="wrapper-content_img" alt="3" src="img/3.jpg" :/>
<img class="wrapper-content_img" alt="4" src="img/4.jpg" :/>
<img class="wrapper-content_img" alt="1" src="img/1.jpg" :/>
</div>
<div class="wrapper-buttons" :>
<span :class="['wrapper-button',{'wrapper_on':index==1}]" @click="turnTo(1)"></span>
<span :class="['wrapper-button',{'wrapper_on':index==2}]" @click="turnTo(2)"></span>
<span :class="['wrapper-button',{'wrapper_on':index==3}]" @click="turnTo(3)"></span>
<span :class="['wrapper-button',{'wrapper_on':index==4}]" @click="turnTo(4)"></span>
</div>
<a href="javascript:;" rel="external nofollow" rel="external nofollow" class="wrapper-arrow wrapper-prev" : @click="prev"><</a>
<a href="javascript:;" rel="external nofollow" rel="external nofollow" class="wrapper-arrow wrapper-next" : @click="next">></a>
</div>
</div>
<a href="#" rel="external nofollow" >aaa</a>
<script type="text/javascript" src="https://unpkg.com/vue@2.1.10/dist/vue.js"></script>
<script type="text/javascript">
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//用來防止連續(xù)點擊
},
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.originalData.num*self.originalData.img_width)){
self.isTrans=false
node.style.left=-self.originalData.img_width+'px'
self.clickdelay=false //當(dāng)?shù)竭_(dá)最后一張圖片時
}
if(left>-100){
self.isTrans=false
node.style.left=-self.originalData.num*self.originalData.img_width+'px'
self.clickdelay=false //當(dāng)?shù)竭_(dá)第一張圖片時
}
},this.originalData.delay)
},
play(){
var self=this;
this.timer=setInterval(function(){
self.next()
},2000)
},
stop(){
this.clickdelay=false//用來防止連續(xù)點擊
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()
}
})
</script>
</body>
</html>關(guān)于vue中怎么實現(xiàn)一個無限輪播插件就分享到這里了，希望以上內(nèi)容可以對大家有一定的幫助，可以學(xué)到更多知識。如果覺得文章不錯，可以把它分享出去讓更多的人看到。
免責(zé)聲明：本站發(fā)布的內(nèi)容（圖片、視頻和文字）以原創(chuàng)、轉(zhuǎn)載和分享為主，文章觀點不代表本網(wǎng)站立場，如果涉及侵權(quán)請聯(lián)系站長郵箱：is@yisu.com進(jìn)行舉報，并提供相關(guān)證據(jù)，一經(jīng)查實，將立刻刪除涉嫌侵權(quán)內(nèi)容。
億速云公眾號
手機網(wǎng)站二維碼