SOURCE

 new Vue({
            el:"#banner",
            data:{
                imgs:[
                  "https://img-download.pchome.net/download/1k0/k6/4u/o6r1un-1rvh.jpg@0e_0o_320w_520h_90q.src",
                  "https://img-download.pchome.net/download/1k0/k6/4u/o6r1un-2353.jpg@0e_0o_320w_520h_90q.src",
                  "https://img-download.pchome.net/download/1k0/k6/4u/o6r1un-mef.jpg@0e_0o_320w_520h_90q.src",
                  "https://img-download.pchome.net/download/1k0/k6/4u/o6r1un-deq.jpg@0e_0o_320w_520h_90q.src",
                  "https://img-download.pchome.net/download/1k0/k6/4u/o6r1um-1snd.jpg@0e_0o_320w_520h_90q.src"],
                imgShow:0,
                balHover:-1
            },
            methods:{
                goL(){
                    if(this.imgShow){
                        this.imgShow--;
                    }else{
                        this.imgShow=this.imgs.length-1;
                    }

                },
                goR(){
//                    console.log(this.imgShow);
                    this.imgShow++;
                    if(this.imgShow >= this.imgs.length){
                        this.imgShow = 0
                    }

                },
                balActive(index){
                    this.imgShow = index;
//                    console.log(index);
                },
                over(index){
                    this.balHover = index;
                },
                out(){
                    this.balHover=-1;
                }
            }

        })

  <div id="banner">
        <div class="imgs">
            <div class="img">
                <img  alt="" v-for="img,index in imgs" v-bind:src="img" v-bind:class="{show:imgShow == index}">
            </div>
            <div class="lr">
                <span class="l fl" v-on:click="goL()">&lt;</span>
                <span class="r fr" v-on:click="goR()">&gt;</span>
            </div>
            <div class="bal">
                <span v-for="img,index in imgs" v-on:click="balActive(index)" v-bind:class="{active:imgShow == index}" v-on:mouseenter="over(index)" v-on:mouseleave="out()">
                    <div class="smallImg" v-bind:class="{show:index == balHover}">
                        <img v-bind:src="img" alt="" >
                    </div>
                </span>
            </div>
        </div>
    </div>

 *{
            margin: 0;
            padding: 0;
        }
        .fl{
            float: left;
        }
        .fr{
            float: right;
        }
        #banner{
            width:375px;
            height:667px;
            background: #ccc;
            margin: 0 auto;
        }
        .imgs{
            width:320px;
            margin: 0 auto;
            padding-top: 20px;
            position: relative;
        }
        .img{
            height:568px;
            position: relative;
        }
        .img img{
            width:100%;
            position: absolute;
            top: 0;
            opacity: 0;
            transition: opacity 0.8s;
        }
        .img img.show{
            opacity: 1;
        }
        .lr{
            width:114%;
            font-size: 34px;
            position: absolute;
            top: 50%;
            left:50%;
            z-index:1;
            color: orange;
            font-weight:block;
            transform:translateX(-50%)

        }
        .lr>span{
            cursor: pointer;
            /* background:#fff; */
        }
        .bal{
            text-align: center;
            padding-top: 10px;
        }
        .bal span{
            display: inline-block;
            width:10px;
            height:10px;
            border-radius: 100%;
            background: #fff;
            margin: 3px;
            cursor: pointer;
            position: relative;
        }
        .bal span.active{
            background: orange;
        }
        .smallImg{
            height:83px;
            position: absolute;
            bottom: 15px;
            border: 3px solid #000;
            transform: translateX(-50%);
            left: 50%;
            display: none;
        }
        .smallImg:before{
            content: "";
            border: 5px solid transparent;
            border-top: 5px solid #000;
            position: absolute;
            bottom: -13px;
            left:50%;
            transform: translateX(-50%);
        }
        .smallImg.show{
            display: block;
        }
        .smallImg img{
            width:50px;
            height:100%;
        }