vue实现待列表的轮播图+视频，商品详情轮播图

image.png

image.png

 <div class="col-lg-6">
                        <video v-if="mediaType=='video'" controls class="w-100"  style="height: 500px;background-color: #000;" :src="obj.video"></video>
                        <img v-if="mediaType=='img'" class="w-100" :src="selimgurl">
                        <div class="itydiv">
                            <div class="ityscroll" :style="'width:'+((obj.imgsli.length+((obj.video!=null && obj.video!='')?1:0))*105)+'px;'" >
                                <div class="ity" v-if="obj.video!=null && obj.video!=''">
                                    <img @click="imgactivehandle(-1,'video')"  src="../../assets/img/playvideo.jpg"/>
                                </div>
                                <div  class="ity" :class="'active'+(selimg==i?'active':'')" v-for="(t,i) in obj.imgsli"  >
                                    <img @click="imgactivehandle(i,'img')" :src="t"/>
                                </div>
                            </div>

                        </div>
                    </div>

 imgactivehandle(i,mediaType) {
            this.mediaType=mediaType;
            if(this.mediaType=='img'){
                this.selimgurl = this.obj.imgsli[i];
                this.selimg = i;
            }

        },

 data() {

        return {
            selimgurl:'',
            mediaType:'img',
            selimg:0,}

   .itydiv{width: 100%;overflow-x: auto;height: 110px;overflow-y: hidden;}
    .itydiv::-webkit-scrollbar {
        width: 6px;
        height: 6px;
    } .itydiv::-webkit-scrollbar-thumb {
          background-color: #ddd;
          border-radius: 3px;
      }

    .ityscroll{height: 100px; overflow-y: hidden;}

.ity{width: 100px;height: 100px;float: left;margin-top: 2px;margin-left: 2px;}
.ity img{width: 100px;height: 100px;}