Day15-旧网站重写成Vue_6_多图片轮播

先写时间轮播的部分
一样先做一个data预设

data: {
    time: [0, 3, 4, 2, 4, 4, 5]
}

预设的数字是每一个"介绍"中有多少张图片

然後写函式

timechange() {
    for (let i = 0; i < this.indexs.length; i++) {
        this.indexs[i]++;
        if (this.indexs[i] >= this.time[i]) {
            this.indexs[i] = 0
            this.indexs.push();
        }
        else {
            this.indexs.push();
        }
    }
}

函式内容会比Day12的复杂
首先要让indexs中的每一个数字都要做到加法，才能让图片自己往後切一张
所以要使用for回圈让indexs这个阵列的每一个数字都改动到
然後需要判断是否已经是该"介绍"的最後一张图
写一个判别式，若indexs阵列的该项数值>=time阵列同一项，代表已经到最後一张，必须切回第一张，所以直接把数值设定成0
写好函式後在mounted呼叫他

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

便能让图片自己切换了

为了让切换看的明显，动图的秒数是1秒，比较舒适的秒数是2~3秒左右

然後来写tab标签被点击时此篇跟前篇做的一些预设的更动
这边全部都是写在Day13的tab标签会使用到的indexPlus函式
帮函式再新增两个参数，用以判别被点击到的tab有多少"介绍"跟各自有多少"图片"
然後需要改动的是indexs跟time的内容

indexPlus(n, s, im) {
    this.indexs = []
    this.time = []
    for (let i = 0; i < s; i++) {
        this.indexs.push(0)
    }
    for (let i = 0; i < s - 1; i++) {
        this.time.push(im[i + 1].im.length)
    }
    this.time.unshift(0)
    this.tab.fill(false);
    this.tab[n] = 1;
}

在函式中设定好阵列的清除与加入新东西後，我们需要在tab使用函式时给予相对应的参数数值，所以HTML也要做改动

<a class="tab_title" @click="indexPlus(index, itr.length, itr)" for="key" :class="{'choose':tab[index]}">{{key}}</a>

这样子改过之後我们的tab就能随意切换也不会跑掉了