用vue写一个简单轮播图效果

轮播图在不同的移动设备随处可见，可以增添页面几分美观等优点，接下来用渐进式框架vue来实现轮播图效果

一、原理：

创建数组backgroundImg作为轮播图图片路径，声明变量timer为时间，swing=0为默认的第一张图片。通过定时器或点击来切换图片效果。

二、变量：

      swing: 0,timer: null,//背景图backgroundImg: ["background:url(https://imgessl/commendpic/20210831/20210831233709628572.jpg) no-repeat center top;","background:url(https://imgessl/commendpic/20200407/20200407114244160948.jpg) no-repeat center top;","background:url(https://imgessl/commendpic/20210831/20210831233709628572.jpg)no-repeat center top; ",],
 

三、 在计算属性computed中声明两个方法proIndex和nextIndex，来做加减档操作，

   //computedcomputed: {//上一张proIndex() {if (this.swing == 0) {return this.backgroundImg.length - 1;} else {return this.swing - 1;}},//下一张nextIndex() {if (this.swing >= this.backgroundImg.length - 1) {return 0;} else {return this.swing + 1;}},},

四、在生命周期图中Vue实例渲染完成后执行mounted方法中定时器，以达到几秒执行一次,将this.nextIndex值赋给变量swing,以达到加减操作。

//定时器
 //mountedmounted() {return (this.timer = setInterval(() => {this.goPage(this.nextIndex);}, 6000));},//METHODmethods: {gotoPage(index) {this.swing = index;},},
 

五、模板渲染(左右切换与小圆点切换)

  
 
//$lt为小于号，在这里本人用大小于号来左右切换
<
//$gt为大于号，在这里本人用大小于号来左右切换
>
 

六、css样式