微信小程序3D悬浮轮播图

废话不多说，直接上代码

.wxml
<swiper previous-margin='50px' next-margin='50px' bindchange="swiperChange" style='height:{{swiperH}};' autoplay="true" circular="true">
  <swiper-item wx:for='{{bnrUrl}}' wx:key='' style="background-image:cover;">
    <image class='le-img {{nowIdx==index?"le-active":""}}' bindload='getHeight' src='{{item}}' style='height:{{swiperH}};'></image>
  </swiper-item>
</swiper>
/*注意点：1、previous-margin表示前边距 next-margin表示后边距
		  2、添加autoplay实现自动播放
		  3、添加circular属性实现无缝衔接*/
	

.wxss
swiper {
 padding-top: 30px;
}
.le-img {
 width: 100%;
 display: block;
 transform: scale(0.8);
 transition: all 0.3s ease;
 border-radius: 6px;
}
.le-img.le-active {
 transform: scale(1);
}

.js
  data: {
    swiperH: '',//swiper高度
    nowIdx: 0,//当前swiper索引
    bnrUrl: [//图片列表
      "https://6d69-mini-p-nbnvq-1300763744.tcb.qcloud.la/my-image.JPG?sign=601b17a99e2d0145c44dc8002428ddb6&t=1577695911",
      "https://6d69-mini-p-nbnvq-1300763744.tcb.qcloud.la/DSC_0527.JPG?sign=740384b788dcdd1ac526d18f86488531&t=1577695791",
      "https://6d69-mini-p-nbnvq-1300763744.tcb.qcloud.la/my-image.jpg?sign=6123a0b25be9d01063cc34434f462391&t=1577695936",
    ]
  },
  //获取swiper高度
  getHeight: function (e) {
    var winWid = wx.getSystemInfoSync().windowWidth - 2 * 50;//获取当前屏幕的宽度
    var imgh = e.detail.height;//图片高度
    var imgw = e.detail.width;
    var sH = winWid * imgh / imgw + "px"
    this.setData({
      swiperH: sH//设置高度
    })
  },
  //swiper滑动事件
  swiperChange: function (e) {
    this.setData({
      nowIdx: e.detail.current
    })
  },
  /*注意：js中的图片地址是将图片直接上传到云开发服务器，然后复制图片的url地址直接使用，避免本地图片文件过大无法提交小程序项目*/