vue--轮播图案例

Vue里如何实现轮播图案例
DOM

css样式不做介绍了，主要是介绍如何在vue中完成js交互

  <div class="banner bannermob">
            <div class="caroufredsel_wrapper" style="display: block; text-align: start; float: none; position: relative; inset: auto; z-index: auto; width: 1680px; height: 500px; margin: 20px auto; overflow: hidden;">
                <ul class="clearfloat" style="text-align: left; float: none; position: absolute; inset: 0px auto auto 0px; margin: 0px; width: 18480px; height: 500px; z-index: auto; opacity: 1;">
                <li class="left banner_Item" v-bind:style="bannerItemStyle"></li>
                </ul>
            </div>

            <div class="bannerPagination ctn" style="display: block;">
                <a  class="selected" v-on:click="bpag(1,$event)" ><span>1</span></a>
                <a  class="" v-on:click="bpag(2,$event)"><span>2</span></a>
                <a  class="" v-on:click="bpag(3,$event)"><span>3</span></a>
                <a  class="" v-on:click="bpag(4,$event)"><span>4</span></a>
                <a  class="" v-on:click="bpag(5,$event)"><span>5</span></a>
            </div>
            <a class="bannerPrev bannerBtn"  style="display: block;"><img src="static/images/bannerPrev.png" v-on:click="bpagPrev()"></a>
            <a class="bannerNext bannerBtn" style="display: block;"><img src="static/images/bannerNext.png" v-on:click="bpagNext()"></a>
        </div>

JS

export default {

    data(){
      return{
          bannerItemStyle:{
              background:"url(static/images/banner1.png) ",
          },
          bannerIndex:1
      }
    },
    methods:{
        bpag:function (i,e){

            $(".bannerPagination a").removeClass("selected");
            var el =e.target
            $(el).addClass("selected");

            this.bannerItemStyle.background="url(static/images/banner"+i+".png) ";

        },
        bpagNext:function (){


            this.bannerIndex = (this.bannerIndex +1 ) % 6

            if(this.bannerIndex == 0){
                this.bannerIndex = 1
            }

            this.bannerItemStyle.background="url(static/images/banner"+this.bannerIndex+".png) ";
        },
        bpagPrev:function (){

            this.bannerIndex = (this.bannerIndex -1 ) % 6
            if(this.bannerIndex == 0){
                this.bannerIndex = 5
            }

            this.bannerItemStyle.background="url(static/images/banner"+this.bannerIndex+".png) ";
        }

    }
}