手写简易轮播图

直接贴代码自己看效果

<template>
  <div style="width: 100%; height: 600px">
    <div class="score-contain">
      <i class="el-icon-arrow-left aa" @click="lunboAnother(isRadius - 1, true)"></i>
      <i class="el-icon-arrow-right bb" @click="lunboAnother(isRadius + 1, false)"></i>
      <img src="@/assets/a1.png" alt="" id="img" />
      <img src="@/assets/a2.png" alt="" style="width: 610px; height: 364px" id="img" />
      <img src="@/assets/a1.png" alt="" style="width: 610px; height: 364px" id="img" />
      <img src="@/assets/a4.png" alt="" style="width: 610px; height: 364px" id="img" />
      <div class="radius-contain">
        <div v-for="(item, i) in 4" :key="i" class="radius" :class="{ isCurrent: i === isRadius }"
          @click="lunboAnother(i)"></div>
      </div>
    </div>
    <el-button @click="lunboAnother(0)">开始轮播</el-button>
    <el-button @click="stop">停止轮播</el-button>
    <!-- <linePie></linePie>
   <CysPie></CysPie> -->
  </div>
</template>
<script>
// import linePie from './LinePie.vue';
// import CysPie from './CysPie.vue'
export default {
  // components: {linePie ,
  //   CysPie
  // },
  data() {
    return {
      data1: [300, 450, 90, 300, 520, 450, 150, 300], //数值
      isRadius: 0, //小圆点
      timer: null, //定时器
    };
  },
  mounted() { },
  computed: {},
  watch: {},
  methods: {
    stop() {
      this.clearInterval();
    },
    clearInterval() {
      clearInterval(this.timer);
    },
    lunboAnother(i, b) {
      let img = document.getElementById("img");
      this.clearInterval();
      if (b) {
        if (i === -1) {
          i = 3;
        }
      } else {
        if (i === 4) {
          i = 0;
        }
      }
      img.style.marginLeft = -i * 610 + "px";
      this.isRadius = i;
      this.timer = setInterval(() => {
        i += 1;
        if (i === 4) {
          i = 0;
        }
        this.isRadius = i;
        img.style.marginLeft = -i * 610 + "px";
      }, 2000);
    },
  },
};
</script>

<style lang="scss">
.score-contain {
  width: 610px;
  height: 364px;
  display: flex;
  overflow: hidden;
  margin-left: 100px;
  margin-top: 100px;
  position: relative;
  .aa {
    position: absolute;
    font-size: 40px;
    color: #fff;
    left: 20px;
    transform: translateY(-50%);
    top: 50%;
  }

  .bb {
    position: absolute;
    font-size: 40px;
    color: #fff;
    right: 20px;
    transform: translateY(-50%);
    top: 50%;
  }

  .radius-contain {
    position: absolute;
    bottom: 40px;
    left: 40px;
    display: flex;

    .radius {
      width: 10px;
      height: 10px;
      border-radius: 50%;
      background-color: #ecf8ff;
      margin-right: 4px;
    }

    .isCurrent {
      background-color: #87d353;
    }
  }
}
</style>