Vue

by guohan yu

HTML

<div id="app">
  <div class="banner">
    <div
      v-for="(img, idx) of imgs"
      :key="`img${idx}`"
      :class="getClass(idx)"
      @click="nextimg"
    >
    </div>
  </div>
</div>

CSS

.banner {
  display: flex;
  flex-flow: row nowrap;
  align-items: center;
  justify-content: center;
  width: 600px;
  height: 200px;
  background: #fff;
  border: 1px solid #000;
}
.red--active,
.green--active,
.blue--active {
  width: 400px;
  height: 200px;
}
.red,
.green,
.blue {
  width: 100px;
  height: 200px;
}
.red,
.red--active {
  background-color: #f00;
}
.green,
.green--active {
  background-color: #0f0;
}
.blue,
.blue--active {
  background-color: #00f;
}

Vue

new Vue({
  el: "#app",
  data: {
  	imgs: ['red', 'green', 'blue'],
    activeIndex: 1,
  },
  methods: {
  	getClass(idx) {
    	if (idx === this.activeIndex) {
      	return `${this.imgs[idx]}--active`
      }
    	return this.imgs[idx]
    },
    nextimg() {
    	const firstimg = this.imgs.shift()
      this.imgs.push(firstimg)
    },
  }
})