vue实现一个画廊画册效果
代码语言:html
所属分类:画廊相册
代码描述:vue实现一个画廊画册效果
下面为部分代码预览,完整代码请点击下载或在bfwstudio webide中打开
<!DOCTYPE html> <html lang="en"> <head> <meta charset="UTF-8"> <style> #app { display: flex; align-items: center; flex-flow: column; max-width: 800px; margin: auto; } #app .images { display: flex; flex-flow: wrap; justify-content: center; } #app .images .image img { width: 6rem; height: 6rem; object-fit: cover; margin: 1rem; border: 4px solid white; box-shadow: 3px 3px 13px grey; } #app .images .active img { border-color: pink; } #app .bigImage { height: 20rem; margin: 1rem; border: 4px solid white; box-shadow: 3px 3px 13px grey; } </style> </head> <body translate="no"> <div id="app"> <img class="bigImage" v-bind:src='activeImage' /> <div class="images"> <div v-for="image in images" v-bind:key="image" v-on:click="activeImage = image" v-bind:class="['image', { active: activeImage === image }]"> <img v-bind:src='image' /></div> </div> </div> <script type="text/javascript" src="http://repo.bfw.wiki/bfwrepo/js/vue@2.6.1.js"></script> <script > new Vue({ el: "#app", data: { activeImage: "https://images.unsplash.com/photo-1560807707-8cc77767d783?ixlib=rb-1.2.1&ixid=eyJhcHBfaWQiOjEyMDd9&auto=format&fit=crop&w=675&q=80", images: [ "https://images.unsplash.com/photo-1560807707-8cc77767d783?ixlib=rb-1.2.1&ix.........完整代码请登录后点击上方下载按钮下载查看
网友评论0