小編給大家分享一下vue.js可以用來做輪播圖，相信大部分人都還不怎么了解，因此分享這篇文章給大家參考一下，希望大家閱讀完這篇文章后大有收獲，下面讓我們一起去了解一下吧！

創(chuàng)新互聯(lián)長(zhǎng)期為上千家客戶提供的網(wǎng)站建設(shè)服務(wù)，團(tuán)隊(duì)從業(yè)經(jīng)驗(yàn)10年，關(guān)注不同地域、不同群體，并針對(duì)不同對(duì)象提供差異化的產(chǎn)品和服務(wù)；打造開放共贏平臺(tái)，與合作伙伴共同營(yíng)造健康的互聯(lián)網(wǎng)生態(tài)環(huán)境。為廣德企業(yè)提供專業(yè)的成都網(wǎng)站設(shè)計(jì)、成都網(wǎng)站建設(shè)，廣德網(wǎng)站改版等技術(shù)服務(wù)。擁有十多年豐富建站經(jīng)驗(yàn)和眾多成功案例,為您定制開發(fā)。

vue.js能做輪播圖，其實(shí)現(xiàn)方法：首先寫出整體的框架；然后根據(jù)imgArray照片的數(shù)組渲染小圓點(diǎn)的數(shù)量；接著將span綁定on為小圓點(diǎn)點(diǎn)亮的狀態(tài)；最后通過自定義變量ifshow來顯示圖片的顯示隱藏，并設(shè)置nowindex來控制輪播即可。

最近新學(xué)習(xí)了vuejs,嘗試著用vuejs寫了一個(gè)簡(jiǎn)單的圖片輪播，便做個(gè)簡(jiǎn)單的記錄

（1）先寫出整體的框架

根據(jù)imgArray這個(gè)照片的數(shù)組渲染小圓點(diǎn)的數(shù)量，為span綁定on為小圓點(diǎn)點(diǎn)亮的狀態(tài)，照片的顯示隱藏通過自定義變量ifshow來顯示，nowindex則控制輪播對(duì)應(yīng)的照片。

（2）輪播圖的數(shù)組，如果是本地的圖片，而且不放在static文件下的，請(qǐng)用require圈上路徑，否則路徑會(huì)報(bào)錯(cuò)。如果是從后臺(tái)服務(wù)器獲取的則不需要。

data(){
return{
imgArray: [
require('../../img/item_01.png'),
require('../../img/item_02.png'),
require('../../img/item_03.png'),
require('../../img/item_04.png')
]
}
}

（3）主要就是通過改變自定義變量nowindex來改變輪播圖的狀態(tài)，要注意滑動(dòng)的過程是能看見兩張圖的，所以在goto函數(shù)中設(shè)置了一個(gè)短暫的定時(shí)器，讓一張顯示另一張隱藏，分別加上不同的過度效果。

export default {
props:{
imgArray:{
type:Array,
default:[]
}
},
data() {
return {
ifshow:true,
nowindex:0,
}
},
created(){
this.timerun()
},
computed:{
nextindex(){
if(this.nowindex === this.imgArray.length -1){
return 0
}else{
return this.nowindex + 1
}
}
},
methods: {
goto(index){
let that = this;
this.ifshow = false;
setTimeout(function(){
that.ifshow = true;
that.nowindex = index;
},100)
 
},
timerun(){
 let that = this;
 setInterval(function(){
 that.goto(that.nextindex)
 },2000)
 }
}
}

到這里，這個(gè)簡(jiǎn)單的輪播圖就到此結(jié)束了。

以上是“vue.js可以用來做輪播圖”這篇文章的所有內(nèi)容，感謝各位的閱讀！相信大家都有了一定的了解，希望分享的內(nèi)容對(duì)大家有所幫助，如果還想學(xué)習(xí)更多知識(shí)，歡迎關(guān)注創(chuàng)新互聯(lián)行業(yè)資訊頻道！