使用vue做一个简单的轮播图

主要是用到了动态样式绑定和transform的一些属性

<template>
  <div class="box">
    <div class="lunbo" :style="transform">
      <div :class="item" v-for="(item, index) in imgs" :key="index">
        <img :src="require(`../img/${item}`)">
      </div>
    </div>
    <div class="indicator">
      <span :class="{ active: currentIndex == index }" @click="toggle(index)" v-for="(itme, index) in imgs" :key="index">
      </span>
    </div>
  </div>
</template>
<script>
export default {
  data() {
    return {
      imgs: ["1.jpg", "2.jpg", "3.jpg", "4.jpg"],
      currentIndex: 0,
      transform: ""
    }
  },
  methods: {
    toggle(index) {
      this.currentIndex = index
      this.transform = { transform: `translateX(-${index}00%)` }
    }
  }
}
</script>

<style>
* {
  margin: 0;
  padding: 0;
  box-sizing: border-box;
}
.box {
  width: 500px;
  height: 300px;
  margin: 10px auto;
  overflow: hidden;
  position: relative;
}
.lunbo {
  width: 100%;
  height: 100%;
  display: flex;
  transition: 0.5s;
}
.box .lunbo img {
  width: 500px;
  height: 300px;
}
.indicator {
  position: absolute;
  bottom: 10px;
  display: flex;
  left: 50%;
  transform: translateX(-50%);
}
.indicator span {
  width: 15px;
  height: 15px;
  border: 1px solid #fff;
  border-radius: 50%;
  margin: 0 3px;
}
.active {
  background-color: #fff;
}
</style>

效果：