记vue中自定义实现轮播图（不引用插件）

原文链接

所用方法和思想跟上面原文一样，就是增加了样式，以及记录如何修改里面的属性。

实现原理：
图片滑动即margin-left或者left的改变（和图片滑动方向有关），
点击切换即点击相应按钮，跳转到相关图片（数值判断）

<template>
  <div id="lunbo">
    <div
      class="lunbo"
      :style="{
           transition:slide+'s',
           marginLeft:-screen*num +'px'
      }"
    >
      <img v-for="(item,index) in miaosha" :key="index" :src="item.icon" alt />
    </div>

    <div class="buttons">
      <div
        class="button"
        v-for="(item,index) in button"
        :key="index"
        :class="{active:buttonVis(index)
           }"
        @click="changeImg(index)"
      ></div>
      <!-- 此处将button的值传过去用于判断是否给button添加active的class属性值，从而改变按钮的颜色 -->
    </div>
  </div>
</template>
<script>
export default {
  data() {
    return {
      miaosha: [
        {
          num: 0,
          icon: require("../../assets/images/project/1.png")
        },
        {
          num: 1,
          icon: require("../../assets/images/project/1.png")
        },
        {
          num: 2,
          icon: require("../../assets/images/project/1.png")
        },

        {
          num: 3,
          icon: require("../../assets/images/project/1.png")
        }
      ],
      button: [0, 1, 2, 3],
      //切换图片的时间
      slide: 1,
      //图片的个数
      num: 0,
      //定时器的名称
      timer: null,
      //屏幕的尺寸
      screen: null,
      //定时器每张图停留的时间
      min: 3000
    };
  },
  methods: {
    //此处用于切换图片时按钮颜色的高亮
    buttonVis(index) {
      if (index == this.num) {
        return true;
      } else {
        return false;
      }
    },
    //点击按钮切换图片时，让num等于当前按钮的index值     num改变，图片也随之改变
    //此处让slide=0是为了点击瞬间切换，而不是倒退轮播图
    changeImg(index) {
      this.num = index;
      this.slide = 0;
    },
    //此方法主要用于判断图片轮播的距离
    get() {
      //获取屏幕的宽度，以实现随着页面的改变，图片滑动的距离改变
      this.screen = document.body.clientWidth * 0.4;

      if (this.num == 3) {
        this.slide = 0;
        //当滑动到第四章图片时，切换的时间为0s，这样不会出现轮播倒滑的效果
        this.num = 0;
      } else {
        this.slide = 1;
        this.num++;
        // console.log(this.num)
      }
    }
  },
  mounted() {
    this.timer = setInterval(this.get, this.min);
  },

  //关闭页面之前摧毁定时器
  beforeDestroy() {
    clearInterval(this.timer);
    // this.timer = null
  }
};
</script>
<style scoped>
/*最顶层的容器，宽度只能够显示一张图片*/
/* width设置轮播图的大小  */
#lunbo {
  width: 40%;
  overflow: hidden;
  text-align: center;
  position: relative;
  border-radius: 1rem;
  margin: 0 auto;
}

/*轮播图所在容器，宽度为父容器的四倍，这里设置了4张轮播图，轮播图滑动时，一个两秒的滑动特效*/
/* 有几张轮播图宽度设置多少倍 */
.lunbo {
  width: 400%;
  transition: 2s;
  background-color: #fff;
}

/* 图片的宽度=1除以轮播图的张数 */
.lunbo img {
  width: 25%;
}

.buttons {
  position: absolute;
  left: 50%;
  top: 90%;
  transform: translate(-50%, -50%);
  display: flex;
}
.button {
  display: inline-block;
  margin-left: 10px;
  width: 20px;
  height: 4px;
  border-radius: 2px;
  background-color: white;
}
.active {
  background-color: red;
}

</style>

比如你有几张轮播修改的点（六点）

• </script>标签里面
  1、data中的miaosha数组里面加入你想插入图片的序号和相对地址
  2、data中的button: [0, 1, 2, 3]中设置相对应的数组，有几张图片从零到几写上去
  3、get()方法中
  this.screen = document.body.clientWidth * 0.4; 0.4替换成下面css中定义的的父盒子的width
  if (this.num == 3) 3替换成 轮播图片数 - 1

• <style>标签里面
  1、父盒子width设置大小，和上面获取屏幕宽度对应

/*最顶层的容器，宽度只能够显示一张图片*/
/* width设置轮播图的大小，越大越大  */
#lunbo {
  width: 40%;
  overflow: hidden;
  text-align: center;
  position: relative;
  border-radius: 1rem;
  margin: 0 auto;
}

2、子盒子 width设置大小，有几张轮播图宽度设置多少倍

/*轮播图所在容器，宽度为父容器的四倍，这里设置了4张轮播图，轮播图滑动时，一个两秒的滑动特效*/
/* 有几张轮播图宽度设置多少倍 */
.lunbo {
  width: 400%;
  transition: 2s;
  background-color: #fff;
}

3、设置图片大小=1/轮播图的张数

/* 图片的宽度=1除以轮播图的张数 */
.lunbo img {
  width: 25%;
}