这时，可以实现基本的轮播效果，在这里我们无需关注视图，只需要关注数据即可，因为数据改变了，视图之然就变了，可以用控制台改变index的值。
小圆点切换时，图片切换这个功能的实现特别简单，只需要在点击的时候将i的值赋值给index即可，即index改变，视图重新渲染。
1 <ul class="dots">2 <li v-for="(item,i) of sliderArray" :class="{
3 active:i===index
4 }" :key="i" @click="index=i"></li>
5 </ul>
自动轮播和停止轮播
实现自动轮播的关键是在组件挂载时调用方法，停止轮播的关键是组件销毁时，销毁定时器。
鼠标悬停，轮播停止。鼠标离开，录播继续。
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" @mouseleave="autoStart" @mouseenter="autoStop">
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" @click="index=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 timer:null
32 }
33 },
34 mounted(){
35 this.autoStart()
36 },
37 destroyed(){
38 this.autoStop()
39 },
40 methods:{
41 autoStart(){
42 if(this.timer){
43 return
44 }
45 this.timer=setInterval(()=>{
46 this.index=(this.index+1)%this.sliderArray.length;
47 },2000)
48 },
49 autoStop(){
50 clearInterval(this.timer);
51 this.timer=null;
52 }
53 }
54 }
55</script>
56
57<style scoped>
58 /* 样式 */
59 .banner-container {
60 height: 350px;
61 position: relative;
62 overflow: hidden;
63 }
64 .banner-container li {
65 display: block;
66 width: 1080px;
67 height: 100%;
68 float: left;
69 }
70 .images {
71 height: 100%;
72 transition: 0.5s;
73 }
74 .banner-container img {
75 width: 1080px;
76 height: 100%;
77 }
78 .dots {
79 position: absolute;
80 bottom: 10px;
81 right: 10px;
82 display: flex;
83 }
84 .dots li {
85 width: 10px;
86 cursor: pointer;
87 height: 10px;
88 margin: 0 3px;
89 border-radius: 50%;
90 border: 1px solid;
91 color: #fff;
92 }
93 .dots li.active {
94 background: #fff;
95 }
96</style>