vue 翻牌子动画_Vue 3D轮播 带缩略图 版本 （+动画 翻卡）

前言

用Vue来写了 移动端 3D轮播 带缩略图  ,在加 动画翻卡效果  ，其实也不是太难吧，也就做了一下午，哈哈，

船到桥头自然直，这样才可以，

首先看下做好的效果图

可以 点击 滑动 ，可以触摸滑动， 可以点击 缩略图滑动， 最后 在点击那个 选中的 翻卡的 那个有翻卡 的3D效果

代码：

class="img back"v-for="(item,index) in imgsList":key="index + '-img'":class="'img'+ (index+1) ":ref="'imgs'+(index)":id="'img'+(index)"

>

class="img front"v-for="(item,index) in imgFront":key="index":class="'img'+ (index+1) ":ref="'img'+(index)":id="(index)"@click="clickFan(index) "

>

:src="item.img"v-for="(item,index) in imgsList":key="index"@click="smallPhotoClick(index)":ref="'li'+(index)"

>

exportdefault{

name:"error",

data() {return{

imgsList: [

{

img:"http://img1.qq.com/news/pics/16678/16678931.jpg",

isSelect:false},

{

img:"http://img1.gtimg.com/comic/pics/25615/25615217.jpg",

isSelect:false},

{

img:"http://img1.gtimg.com/comic/pics/25615/25615214.jpg",

isSelect:false},

{

img:"https://quickbassdev.oss-cn-shanghai.aliyuncs.com/saas/merchant/2645/191120143413l2DQIkYV",

isSelect:false},

{

img:"https://quickbassdev.oss-cn-shanghai.aliyuncs.com/saas/merchant/2645/1911181823465btd9sxZ",

isSelect:false},

{

img:"https://cdndaily.quickbass.com/o2o/merchant/2645/190912152050_JPjFgap!s200",

isSelect:false}

],

imgFront: [],

<