微信小程序实例:实现3D轮播图特效代码
发布时间:2020-12-14 20:01:26 所属栏目:资源 来源:网络整理
导读:本篇文章给大家带来的内容是关于微信小程序实例:实现3D轮播图特效代码,有一定的参考价值,有需要的朋友可以参考一下,希望对你有所帮助。 在写微信小程序时,有写到实现3D轮播图的效果,可以直接使用微信小程序中自带的组件swiper来实现 效果图如下: 1.sw
本篇文章给大家带来的内容是关于微信小程序实例:实现3D轮播图特效代码,有一定的参考价值,有需要的朋友可以参考一下,希望对你有所帮助。 在写微信小程序时,有写到实现3D轮播图的效果,可以直接使用微信小程序中自带的组件swiper来实现 效果图如下: 1.swiper的相关属性indicator-dots 是否显示小圆点,也可以自己重新设置小圆点 circular 是否衔接滑动,就是实现无限滚动 previous-margin 与上一张图片的间距 next-margin 与下一张图片的间距 autoplay 实现自动滚动 这里主要利用了circular实现无限滚动,然后再加上前后间距,再设置图片的层级和透明度就可以实现了,将图片及容器的高度设置好就差不多可以实现了wxml文件 wxss文件 /* carousel/index.wxss */ page{ background: #f7f7f7f7; } .imageContainer{ width: 100%; height: 500rpx; background: #000; } .item{ height: 500rpx; } .itemImg{ position: absolute; width: 100%; height: 380rpx; border-radius: 15rpx; z-index: 5; opacity: 0.7; top: 13%; } .active{ opacity: 1; z-index: 10; height: 430rpx; top: 7%; transition:all .2s ease-in 0s; } JS文件 // carousel/index.js Page({ (编辑:李大同) 【声明】本站内容均来自网络,其相关言论仅代表作者个人观点,不代表本站立场。若无意侵犯到您的权利,请及时与联系站长删除相关内容! |