vue实现一个轮播效果

效果如下:

 

 

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" @mouseover="cur=index"></li>
    </ol>
  </div>
</template>

<script>
import img1 from '@/assets/images/banner1.jpg'
import img2 from '@/assets/images/banner2.jpg'
import img3 from '@/assets/images/banner3.jpg'
export default {
  data(){
    return {
      cur: 0,
      banners: [{src: img1},{src: img2},{src: img3}],
      timer: null
    }
  },
  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 lang="css" scoped>
/* banner */
.banner {height:420px;position:relative;}
.banner-container {width:1920px;height:420px;position:absolute;left:0;top:0;z-index:1;opacity:0;transition:.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/images/icon2.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:.7s all ease
}
.banner .number-list .active {
  background:#a7936e;
  box-shadow:0 0 0 4px #dfcead;
}
</style>