这是我第 15 篇简书
一. 图片变量设置
- 1.Less:
- <style scoped lang="less">
- @imgurl: "../images/";
- .container {
- width: 100%;
- height: 100%;
- background: url("@{imgurl}background.png") no-repeat center;
- background-size: cover;
- }
- </style>
- 2.SCSS:
- <style scoped lang="scss">
- $imgPath: "../static/images/";
- .plusIcon {
- display: inline-block;
- width: 14px;
- height: 14px;
- background: url(#{$imgPath}plus.PNG) no-repeat center;
- margin-right: 9px;
- }
- </style>
二. 轮播
- <template>
- <div class="overall">
- <div class="vessel">
- <img class="bck" :src="list[activeIndex].img" alt />
- <div class="swiper-container">
- <div class="swiper-wrapper">
- <div class="swiper-slide" v-for="(i,index) in list" :key="index">
- <span>BANNER{{index+1}}</span>
- <img :src="i.img" alt style="width:100%" />
- </div>
- </div>
- <div class="swiper-pagination"></div>
- <!-- 分页器. 如果放置在 swiper-container 外面, 需要自定义样式.-->
- <div class="swiper-button-prev swiper-button-white"></div>
- <!-- 左箭头. 如果放置在 swiper-container 外面, 需要自定义样式.-->
- <div class="swiper-button-next swiper-button-white"></div>
- <!-- 右箭头. 如果放置在 swiper-container 外面, 需要自定义样式.-->
- </div>
- </div>
- </div>
- </template>
- <script>
- import Swiper from "swiper";
- export default {
- data() {
- return {
- activeIndex: 0,
- list: [
- {
- img: require("@/assets/img/bck.jpg")
- },
- {
- img: require("@/assets/img/bck1.jpeg")
- },
- {
- img: require("@/assets/img/bck2.jpg")
- }
- ]
- };
- },
- mounted() {
- let _this = this;
- var mySwiper = new Swiper(".swiper-container", {
- effect: "fade", // 切换效果
- fadeEffect: {
- crossFade: true
- },
- loop: true, // 循环播放
- autoplay: true, // 开启自动播放
- // 显示底部小圆点
- pagination: {
- el: ".swiper-pagination"
- },
- // 显示左右切换
- navigation: {
- nextEl: ".swiper-button-next",
- prevEl: ".swiper-button-prev"
- },
- autoplay: {
- delay: 4000 //4 秒切换一次
- },
- on: {
- // 当切换时触发的方法
- slideChange: function() {
- // this.activeIndex 当前轮播图下标
- if (this.activeIndex> _this.list.length) {
- _this.activeIndex = 0;
- } else {
- _this.activeIndex = this.activeIndex - 1;
- }
- }
- }
- });
- }
- };
- </script>
- <style lang="scss" scoped>
- .overall {
- overflow: hidden;
- }
- .vessel {
- width: 800px;
- height: 400px;
- overflow: hidden;
- position: relative;
- display: flex;
- justify-content: center;
- align-items: center;
- }
- .bck {
- filter: blur(10px);
- width: 100%;
- transform: scale(1.1);
- }
- img {
- display: block;
- position: absolute;
- left: 0;
- top: 0;
- }
- .swiper-container {
- width: 550px;
- height: 300px;
- transition: 0.5s;
- box-shadow: 2px 2px 5px rgb(73, 73, 73);
- cursor: pointer;
- &:hover {
- box-shadow: 0px 0px 5px rgb(73, 73, 73);
- }
- }
- .swiper-slide {
- display: flex;
- justify-content: center;
- align-items: center;
- height: 100%;
- color: white;
- font-weight: bold;
- font-size: 2rem;
- span {
- position: relative;
- z-index: 5;
- }
- }
- .swiper-button-prev,
- .swiper-button-next {
- opacity: 0;
- transition: 0.5s;
- // margin:0 1rem;
- }
- .swiper-container:hover .swiper-button-prev {
- opacity: 1;
- left: 40px;
- }
- .swiper-container:hover .swiper-button-next {
- opacity: 1;
- right: 40px;
- }
- </style>
三. 点击切换背景图
- <div id="playPage" class="blur" v-bind:style="{backgroundImage:'url('+ albumpic_big +')'}">
来源: http://www.jianshu.com/p/b8541db46622