Day12-旧网站重写成Vue_3_单一图片轮播

今天来写介绍那边图片轮播的功能

首先先写一个阵列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档来使用了
估计明天要改动的部分会挺多的呢….