用Vue实现一个简单的图片轮播 (6)

到这一步的时候，有几个问题，第一个是默认我们图片显示第一张，小圆点默认第一个显示，容器的总宽度计算是总图片的长度*100%，Slide.vue定义内部数据index=0，当index和i相等时，添加active类

1<template>
2    <div class="banner-container">
3      <ul class="images" :style="{
4        width:sliderArray.length*100+\'%\',
5        marginLeft:-index*100+\'%\'
6      }">
7        <li v-for="(item,i) of sliderArray" :key="i">
8          <a href="javascript:void(0)"><img :src=item alt=""></a>
9        </li>
10      </ul>
11      <ul class="dots">
12        <li v-for="(item,i) of sliderArray" :class="{
13          active:i===index
14        }" :key="i"></li>
15      </ul>
16    </div>
17</template>
18
19<script>
20    export default {
21        name: "Slider",
22      props:{
23          sliderArray:{
24            require:true,
25            type:Array,
26          }
27      },
28      data(){
29          return{
30            index:0,
31          }
32      }
33    }
34</script>
35
36<style scoped>
37  /* 样式 */
38  .banner-container {
39    height: 350px;
40    position: relative;
41    overflow: hidden;
42  }
43  .banner-container li {
44    display: block;
45    width: 1080px;
46    height: 100%;
47    float: left;
48  }
49  .images {
50    height: 100%;
51    transition: 0.5s;
52  }
53  .banner-container img {
54    width: 1080px;
55    height: 100%;
56  }
57  .dots {
58    position: absolute;
59    bottom: 10px;
60    right: 10px;
61    display: flex;
62  }
63  .dots li {
64    width: 10px;
65    cursor: pointer;
66    height: 10px;
67    margin: 0 3px;
68    border-radius: 50%;
69    border: 1px solid;
70    color: #fff;
71  }
72  .dots li.active {
73    background: #fff;
74  }
75</style>