让对应背景随着轮播的图片变化而改变

使用swiper

cnpm i swiper@5.4.5  --save

然后在main.js里面引入样式
import 'swiper/css/swiper.css'

在需要的页面当中调取import Swiper from "swiper";
然后就可以开始写轮播图了

效果

!<template><div><div class="swiper"><div class="swiper-wrapper"><div class="swiper-slide"><imgsrc="https://img.alicdn.com/tps/i4/TB1yqAhcpmWBuNjSspdSuvugXXa.jpg"/></div><div class="swiper-slide"><imgsrc="https://img.alicdn.com/tps/i4/TB1XVCsaTdYBeNkSmLySutfnVXa.jpg"/></div><div class="swiper-slide"><imgsrc="'https://img.alicdn.com/simba/img/TB1ror0cf5TBuNjSspcSuvnGFXa.jpg"/></div><div class="swiper-slide"><imgsrc="https://img.alicdn.com/tfs/TB1ed2lggmTBuNjy1XbXXaMrVXa-1130-500.jpg_q100.jpg_.webp"/></div></div><div class="swiper-pagination pagiation"></div></div></div>
</template>
<script>
import Swiper from "swiper";
export default {mounted() {const bgColor = this.$refs.bgColor;new Swiper(".swiper", {loop: true,pagination: {el: ".swiper-pagination",clickable: true,},navigation: {nextEl: ".swiper-button-next",prevEl: ".swiper-button-prev",},});},
};
</script><style lang="scss">
.swiper-slide {width: 200px;height: 100px;border: 1px solid red;img {width: 100%;height: 100%;}
}
.swiper-pagination-bullets {top: 70px !important;
}
</style>

让背景随着轮播的图片变化而改变

轮播的on属性

效果

!<template><div><div class="swiper"><div class="swiper-wrapper"><div class="swiper-slide"><imgsrc="https://img.alicdn.com/tps/i4/TB1yqAhcpmWBuNjSspdSuvugXXa.jpg"/></div><div class="swiper-slide"><img/></div><div class="swiper-slide"><imgsrc="'https://img.alicdn.com/simba/img/TB1ror0cf5TBuNjSspcSuvnGFXa.jpg"/></div><div class="swiper-slide"><imgsrc="https://img.alicdn.com/tfs/TB1ed2lggmTBuNjy1XbXXaMrVXa-1130-500.jpg_q100.jpg_.webp"/></div></div><div class="swiper-pagination pagiation"></div></div><div class="footer" :style="{background:bgColor}" ref="bgColor"></div></div>
</template>
<script>
import Swiper from "swiper";
export default {mounted() {const bgColor = this.$refs.bgColor;new Swiper(".swiper", {loop: true,pagination: {el: ".swiper-pagination",clickable: true,},//动态on:{slideChange:function (e) {const i = this.realIndex;}},// 让背景与对应的轮播图颜色保持一致 // 这种是静态的 // on: {//   slideChange: function () {//     console.log(this.realIndex);//     const i = this.realIndex;//     if (i == 0) {//       bgColor.style.transition = "all 0.1s";//       bgColor.style.backgroundColor = "#F3BAC1";//     } else if (i == 1) {//       bgColor.style.transition = "all 0.1s";//       bgColor.style.backgroundColor = "#A9282A";//     } else if (i == 2) {//       bgColor.style.transition = "all 0.1s";//       bgColor.style.backgroundColor = "#5496A0";//     } else {//       bgColor.style.transition = "all 0.1s";//       bgColor.style.backgroundColor = "#E6E6E6";//     }//   },// },navigation: {nextEl: ".swiper-button-next",prevEl: ".swiper-button-prev",},});},
};
</script><style lang="scss">
.swiper-slide {width: 200px;height: 100px;border: 1px solid red;img {width: 100%;height: 100%;}
}
.swiper-pagination-bullets {top: 70px !important;
}
.footer {height: 200px;border: 1px solid red;
}
</style>

让对应背景随着轮播的图片变化而改变相关推荐

Vue+Echarts构建可视化大数据平台实战项目（上）粒子动效，登录界面抖动，背景图轮播★
Vue+Echarts构建可视化大数据平台实战项目(上) 前言分享之前我们先来普及一下什么是数据可视化?数据可视化可以把数据从冰冷的数字转换成图形,揭示蕴含在数据中的规律和道理.数据可视化通俗来说就 ...
JS 轮播图图片切换（定时器）
标题JS 轮播图图片切换(定时器) 这次的轮播图与上次的图片切换相比,仅仅是加上了定时器,使其可以自动切换. 上次的图片切换的链接:https://blog.csdn.net/qq_38318589 ...
html代码轮播图片错位,可拖动选项卡嵌套图片轮播时图片错位的问题
求助大侠,在可拖动选项卡里面嵌套图片轮播时,轮播的图片显示不正确,代码和截图看下边. 求助大侠给解决一下. Hello MUI html, body { background-color: #efef ...
微信小程序—swiper轮播图图片不显示的解决方法
swiper轮播图图片不显示的解决方法遇到图片无法显示的问题,是样式问题在wxss里面新型修改设置宽度 .container{width: 750rpx; } .container swiper ...
CSS3动画实现背景图轮播
CSS3动画实现背景图轮播利用css3动画切换背景图的路径:使这个动画无限循环下去,以实现背景图切换的效果. 代码: <!DOCTYPE html> <html lang=&quo ...
移动端实现swiper轮播的图片视频播放video，仿淘宝商品详情的视频播放（兼容ios和android）
前段时间项目里需要,实现仿淘宝图片视频切换的功能,在网上找了很久,根据网上所收集的信息,最后整合实现项目需求,这里兼容了ios和android,直接拿来用即可,这里是用来记录学习使用的,大家有什么问题 ...
微信小程序轮播图单独添加图片、修改轮播图图片、单独修改某张图片
小老弟上课的基本见解,有错误欢迎大牛们指正  <text>pages/swiper/swiper.wxml< ...
android 3d布局轮播,android 图片/视频混合轮播控件banner
android 图片/视频混合轮播控件banner 在youth5201314的图片轮播控件做的修改原作者github地址:https://github.com/youth5201314/banne ...
【Web前端】【疑难杂症】轮播图图片自适应显示问题（bootstrap3轮播图）
关键代码 html <div id="header" class="carousel slide"><! ...
swiper vue 切换到指定_vue+swiper实现背景跟随轮播图切换
一. 图片变量设置 1.Less: @imgurl: "../images/"; .container { width: 100%; height: 100%; backgroun ...

让对应背景随着轮播的图片变化而改变

使用swiper

效果

让背景随着轮播的图片变化而改变

效果

让对应背景随着轮播的图片变化而改变相关推荐

最新文章

热门文章