vue 图片放大左右切换

来源：互联网发布：网络使人亲切辩论会编辑：程序博客网时间：2024/06/05 06:03

html部分

<div id="app">        <div class="imgList">            <img :src="value" v-for="(value,index) in imgList" :key="value" @click="bigImg(index)">        </div>        <div class="imgMask" v-if="showBigImg" @click.stop="showBigImg=!showBigImg">            <img class="prev"  @click.stop="prev" src="http://cdn.attach.qdfuns.com/notes/pics/201708/28/152301mz6lgplg15rnnrl8.png">            <div class="showImg" >                <img class="bigImg" :src="imgList[num]">            </div>            <img class="next"  @click.stop="next" src="http://cdn.attach.qdfuns.com/notes/pics/201708/28/152246ozacp0x2pxcecme2.png">        </div>    </div>

css 部分

html,body,#app    {        height: 100%;        width:100%;    }    *{        margin: 0;        padding:0;        box-sizing:border-box;    }    .imgList{        margin: 0 auto;        width:900px;        display: flex;        flex-direction:row;        flex-wrap:wrap;    }    .imgList img{        width:300px;    }    .imgMask{        position: absolute;        height: 100%;        width:100%;        top:0;        left:0;        z-index: 100;        background:rgba(0,0,0,.6);     }    .showImg{        height:550px;        width:800px;        position: absolute;        left:50%;        top:50%;        transform:translate(-50%,-50%);        border:10px solid #fff;    }    .bigImg{        width:100%;        height:100%;    }    .prev{        position: absolute;        top:50%;        left:10px;        width:40px;        transform:translate(10px,-50%);    }    .next{        width:40px;        transform:translate(10px,-50%);        position: absolute;        top:50%;        right:20px;    }

js部分

var  app = new Vue({        el:"#app",        data(){            return{                showBigImg:false,                num:0,                imgList:[                "http://cdn.attach.qdfuns.com/notes/pics/201708/28/152247enooreornrre1zca.jpg",                "http://cdn.attach.qdfuns.com/notes/pics/201708/28/152606vaqgcsqzyhw9dd0q.jpg",                "http://cdn.attach.qdfuns.com/notes/pics/201708/28/152427alkrlnhtkkghjjeu.jpg",                "http://cdn.attach.qdfuns.com/notes/pics/201708/28/152247c00jnfwzfjqakjrj.jpg",                "http://cdn.attach.qdfuns.com/notes/pics/201708/28/152247nm4jbbkbbklg4blp.jpg",                "http://cdn.attach.qdfuns.com/notes/pics/201708/28/152247etznl2kk9nnk1i2n.jpg"                ]               }        },        methods:{            bigImg(index){                this.showBigImg = true;                this.num = index;            },            prev(){                if(this.num==0){                    this.num =6                }                this.num--;                console.log(this.num)            },            next(){                if(this.num==5){                    this.num=-1;                }                this.num++;            }        }    })

阅读全文

1 0