今天來寫介紹那邊圖片輪播的功能

首先先寫一個陣列data放圖片

data: {
    img: [
        "im/B3-0.jpg",
        "im/B3-1.jpg"
    ]
}

然後寫一個v-for放上圖片，記得加上左右點擊的按鈕

<div class="chevrons">
    <a @click="prevs()" >
        <i class="fas fa-chevron-left"></i>
    </a>
    <a @click="nexts()">
        <i class="fas fa-chevron-right"></i>
    </a>
</div>
<div class="intro_carousel" v-for="(itrm, keym, indexm) in img">
    <img :src="itrm" v-show="keym==imgcount" alt=""
        style="width: 300px">
</div>

這邊圖片的切換是利用變數去控制圖片要顯現出哪一張

v-for=" (item,key,index) in list"
第一個參數item是你的內容，比如我這邊會是圖片的地址
第二個參數key是鍵值，比如我這邊是陣列的第幾項
第三個參數index是索引值，我這邊目前是沒有這項的，後面用json抓很多資料會用到

所以我們需要在data新增一個imgcount好去判別需要顯示哪一張圖
然後要寫兩個methods的function

Methods: {
    prevs() {
        if (this.imgcount > 0) {
            this.imgcount--;
        } else this.imgcount = this.img.length - 1;
    },
    nexts() {
        if (this.imgcount < this.img.length - 1) {
            this.imgcount++;
        } else this.imgcount = 0
    }
}

功能是去加減imgcount變數，然後圖片的顯示是根據keym==imgcount來判別，這樣當imgcount改變時，我們的圖片就會自己判斷是否符合而改變了

然後我們要讓圖片切換時能看出來是第幾張，所以要有索引的點點

<div class="dots" @click="imgchooses(keym)" v-for="(itrm, keym, indexm) in img"
    :class="{'dotschoose':keym==imgcount}">{{keym}}
</div>

新增一個dotschoose的class讓目前顯示的圖片索引跟其他的不太一樣，一樣使用keym==imgcount來判別

然後也要新增一個methods函式

imgchooses(m) {
    this.imgcount = m;
}

抓取被點擊的索引後給函式去改變imgcount的數值，便能做到切換的部分了

接著我們來寫自動切換的部分
一樣新增一個methods函式

timee() {
    this.imgcount++;
    if (this.imgcount == this.img.length) this.imgcount = 0
}

然後在mounted()使用這個函式，讓他一直在背景使用著

mounted() {
    setInterval(this.timee, 3000);
}

我這邊是設成每三秒會呼叫一次剛剛寫好的函式

這樣單一圖片陣列的輪播功能便完成了，明天就可以加入json檔來使用了
估計明天要改動的部分會挺多的呢….