Vue实现轮播图效果

1 上一项和下一项自己添加样式吧.

需要注意的事v-for 后面要加:key值
其他的看代码吧

<template lang="html">
  <div class="banner" @mouseover="endAutoPlay()" @mouseout="startAutoPlay()">
    <a href="javascript:;" class="btn prev" @click="prev()">上一项</a>
    <a href="javascript:;" class="btn next" @click="next()">下一项</a>
    <ul class="banner-list">
      <li class="banner-container" :class="{cur: index==cur}" v-for="banner,index in banners" :key="index">
        <a href="javascript:;">
          <img :src="banner.src">
        </a>
      </li>
    </ul>
    <ol class="number-list">
      <li :class="{active: index==cur}" v-for="banner,index in banners" :key="index" @mouseover="cur=index"></li>
    </ol>
  </div>
</template>

<script>
import img1 from '@/assets/banner1.jpeg'
import img2 from '@/assets/banner2.jpeg'
import img3 from '@/assets/banner3.jpeg'
export default {
  data () {
    return {
      cur: 0,
      timer: 300,
      banners: [{ src: img1 }, { src: img2 }, { src: img3 }]

    }
  },
  created () {
    this.startAutoPlay()
  },
  beforeDestroy () {
    this.endAutoPlay()
  },
  methods: {
    prev () {
      if (this.cur === 0) {
        this.cur = this.banners.length - 1
      } else {
        this.cur--
      }
    },
    next () {
      if (this.cur === this.banners.length - 1) {
        this.cur = 0
      } else {
        this.cur++
      }
    },
    startAutoPlay () {
      this.timer = setInterval(this.next, 2000)
    },
    endAutoPlay () {
      clearInterval(this.timer)
    }
  }
}
</script>

<style>
/* banner */
.banner {
  height: 420px;
  position: relative;
  overflow: hidden;
}
.banner-container {
  width: 100%;
  height: 100%;
  position: absolute;
  left: 0;
  top: 0;
  z-index: 1;
  opacity: 0;
  transition: 0.7s all ease;
}
.banner-container img {
  width: 1920px;
  height: 420px;
}
.banner-container.cur {
  opacity: 1;
}

.banner .btn {
  position: absolute;
  z-index: 2;
  left: 50%;
  top: 200px;
  text-indent: -99999px;
  width: 50px;
  height: 50px;
  border-radius: 50%;
  background-color: #d0c4af;
  background-image: url(../assets/u1.png);
  background-repeat: no-repeat;
}
.banner .btn:hover {
  background-color: #b19e7a;
}
.banner .btn.prev {
  background-position: 0 -5384px;
  margin-left: -605px;
}
.banner .btn.next {
  background-position: 0 -5604px;
  margin-left: 555px;
}
.banner .number-list {
  position: absolute;
  left: 0;
  width: 100%;
  bottom: 4px;
  text-align: center;
  z-index: 2;
}
.banner .number-list li {
  display: inline-block;
  width: 8px;
  height: 8px;
  margin: 0 8px 10px;
  cursor: pointer;
  background: #fff;
  border-radius: 50%;
  border: 1px solid #cecece;
  transition: 0.7s all ease;
}
.banner .number-list .active {
  background: #a7936e;
  box-shadow: 0 0 0 4px #dfcead;
}
</style>