vue实现简单轮播图

做了一个轮播图，可以自动切换，鼠标放上去后停止，左右切换是用element ui加上去的，箭头间距不一样有点难受，之后再吧。记录一下。

下面是html的图和按钮部分 v-for中必须要写index作为:key的值。button应该卸载img后面，写在前面的会被img遮住，加个z-index:1，调高图层就可以了。

        <div
          v-for="(img_url, index) in img_src"
          :key="index"
          v-show="index === mark">
          <img @mouseenter="stop" 
               @mouseleave="start" 
               :src="img_url.url" 
               alt="这是轮播图" />

          <el-button 
          class="left"
           @click="go_back(index)"
            href="#">
            <i class="el-icon-arrow-left"></i>
          </el-button>

          <el-button
           @click="go(index)"
            href="#">
            <i class="el-icon-arrow-right"></i>
          </el-button>
        </div>

自己写的小圆圈

 <div class="bottom">
          <span
            v-for="(img_url, index) in img_src"
            :key="index"
            :class="{ active: index === mark }" >
          </span>
        </div>

这是数据，有一个点是，我本来是把img_src用数组写的，但是发现无法显示本地，打开工具提示找不到路径，只有网图可以显示。本地的图要以对象数组的形式写成这样，img_src.url取值

 img_src: [
        { url: require("../assets/img/1.jpg") },
        { url: require("../assets/img/2.jpg") },
        { url: require("../assets/img/3.jpg") },
      ],
      mark: 0,//现在是第几张
      timer:''//设置定时器

这是点击和自动轮播的方法

 recycle(){
     if (this.mark === this.img_src.length - 1) {
          this.mark = 0;
        } else {
          this.mark++;
        }
    },
stop(){
       clearInterval(this.timer);
    },
    start() {
      this.recycle();//先调用一次
      this.timer=setInterval(() => 
        {this.recycle(),console.log('开始计时');}
      , 2000);
    },
    go(index) {
      if (index < this.img_src.length - 1) {
        this.mark = index + 1;
      }
    },
    go_back(index) {
      if (index > 0) {
        this.mark = index - 1;
      }
    }

在挂载构后调用定时器，销毁之前停止

mounted(){
    console.log('挂载完成');
    this.start();
  },
  beforeDestroy() {
    this.stop();
  },

css的样式，calc也踩坑了，要在运算符的两边加上空格，运算数值加上px才能起效

.cycle {
    width: 100%;
    height: 320px;
    position: relative;
  }
  .cycle img {
    width: 100%;
    height: 100%;
    border-radius: 20px;
    position: absolute;
    background-color: gainsboro;
    display: block;
  }
  .cycle button {
    width: 20px;
    height: 55px;
    position: absolute;
    top: 43%;
    right: 0px;
    opacity: 0.5;
    text-align: center;
  }
  .cycle .left {
    left: 0px;
  }
  .cycle .left i {
    margin-left: -10px;
  }
  
  .bottom {
    position: absolute;
    bottom: 1px;
    left: calc(50% - 27px);
  }
  .cycle .bottom span {
    width: 14px;
    height: 14px;
    border-radius: 7px;
    background-color: rgba(110, 102, 102, 0.849);
    opacity: 0.4;
    margin: 10px;
    display: inline-block;
    /* span是行内元素 */
  }
   /* 圆圈圈激活后*/
  .cycle .active {
  /*数值分别是：水平偏移，上下偏移，模糊，大小，颜色 */
    box-shadow: 0px 0px 2px 2px #53a8ff;
    background-color: #a0cfff !important;
    opacity: 0.6;
  }