這個輪播圖有兩種方式循環進行圖片的切換，一種是點擊左箭頭或右箭頭來切換上一張或下一張，一種是設置定時器，每過5秒自動切換下一張圖片。
先做出輪播圖的基本樣式，再來做切換的js代碼。我使用數組來保存圖片的地址，注意，數組里的圖片相對地址是根據你html文件的位置來的，因為你是要使用在html代碼里，我一開始根據js文件的位置來，導致出現裂圖。使用v-bind指令，綁定img標簽的src屬性: <img :src="imgArr[index]" id="pic">來進行圖片的切換，這里的index是數組索引，我們從第一張圖片開始，所以我們在data里設置index:0。再使用v-on指令來設置點擊左箭頭和右箭頭進行圖片切換。當我們點擊左箭頭時，使用函數pre，我們先判斷此時的index，假如這時index=0，我們將index設置成3（3是最后一張圖片的索引），點擊右箭頭時同理，假如此時的index=3，則設置index=0，這樣即可達到一種循環播放的效果。
設置每過5秒切換下一張圖片，我使用的是setInterval方法，在mounted（）函數里邊使用setInterval(), setIntervar調用的方法在methods里寫，在mounted里調用，注意：setInterval的第一個參數不加括號，第二個參數是時間。
效果如下：
代碼如下：
<!DOCTYPE html> <html lang="en"> <head> <meta charset="UTF-8"> <meta name="viewport" content="width=device-width, initial-scale=1.0"> <title>圖片切換</title> <link rel="stylesheet" href="css/index.css"> </head> <body> <div id="app"> <img :src="imgArr[index]" id="pic"> <img src="images/zuojiantou.png" alt="" id="left" @click="pre" > <img src="images/youjiantou.png" alt="" id="right"@click="next"> </div> <script src="../../vue/vue.js"></script> <script src="js/index.js"></script> </body> </html>
div{ width: 400px; height: 300px; margin: 0 auto; position: relative; } #pic{ width: 400px; height: 300px; } #left{ position: absolute; left: 0px; bottom: 150px; width: 40px; } #right{ position: absolute; right: 0px; bottom: 150px; width: 40px; }
var app=new Vue({ el:'#app', data: { imgArr: ["images/1920x1080.jpg", "images/1920x1080a.jpg", "images/1920x1080b.jpg", "images/1920x1080c.jpg"], index:0, }, methods: { pre:function(){ if(this.index>0){ this.index-- } else if(this.index==0){ this.index=3 } }, next:function(){ if(this.index<3){ this.index++ } else if(this.index==3){ this.index=0 } }, }, mounted() { this.next();//先調用一遍 setInterval(this.next,5000); }, })