网站开发交流吧,商务贸易网站建设,北京市网站制作设计,北京网站开发公司哪里济南兴田德润优惠吗首先看效果#xff01; 比如轮播图时红色#xff0c;那么背景的底色也是红色#xff0c;轮播图时黄色#xff0c;背景的底色也是黄色#xff0c;这就是根据轮播图的图片切换#xff0c;而改变背景颜色随轮播图颜色一致 话不多说#xff0c;直接上代码#xff01;非常简… 首先看效果 比如轮播图时红色那么背景的底色也是红色轮播图时黄色背景的底色也是黄色这就是根据轮播图的图片切换而改变背景颜色随轮播图颜色一致 话不多说直接上代码非常简单 轮播图代码就不放上去了直接使用插件 swiper 选择你喜欢的版本 就可以了 在轮播图的位置 放置一个 div !-- 完事对你没有看错 只需要一个div 来放置图片就ok啦 --
!--
display-{{count}} : 此处我的background-image 是循环出来的
是为了 轮播图中 点击切换按钮的时候切换图片背景色也跟着切换
这个逻辑也很简单通过 swiper插件 可以获取到切换的时候当前的图片索引和上一张的图片索引
然后通过 display-{{count}} 做显引操作 displaynone/display: block
--div classbackgroundChange display-{{count}} stylebackground-image: url({{poster.src}}); display: none;
!-- CSS --
style
.backgroundChange{height: 200px;position: absolute;width: 100%;opacity: .3;filter: blur(100px);
}
/style只需要简短的代码就可以完成上面的效果是不是很简单
