效果實現思路

1. 使用微信元件swiper
2. swiper元件api previous-margin、next-margin

3. 設定當前圖片放大（設定css樣式）
   下面直接貼上程式碼

banner.wxml

  <swiper  autoplay interval="{{interval}}" circular previous-margin="{{leftMargin}}" next-margin="{{rightMargin}}" bindchange="handleChange">
    <block wx:for="{{imgUrls}}">
      <swiper-item>
        <image src="{{item}}" class="slide-image {{currentIndex == index ? 'active': ''}}"/>
      </swiper-item>
    </block>
  </swiper>
 

banner.wxss

.slide-image {
  position: absolute;
  height: 225rpx;
  width: 570rpx;
  border-radius: 15rpx;
  z-index: 5;
  opacity: 0.7;
  top: 13%;
  margin: 0 20rpx;
}

swiper {
  height: 430rpx;
}

.active {
  opacity: 1;
  z-index: 10;
  height: 280rpx;
  width: 570rpx;
  top: 7%;
  transition: all 0.2s ease-in 0s;
}
 

banner.js

Page({
  data: {
    imgUrls: [
      'https://timgsa.baidu.com/timg?image&quality=80&size=b9999_10000&sec=1545220114942&di=3bf52981626b3cc290dd684df29e714c&imgtype=0&src=http%3A%2F%2Fimgsrc.baidu.com%2Fimgad%2Fpic%2Fitem%2F8b82b9014a90f6038de2556a3212b31bb051ed4a.jpg',
      'https://timgsa.baidu.com/timg?image&quality=80&size=b9999_10000&sec=1545220114942&di=3bf52981626b3cc290dd684df29e714c&imgtype=0&src=http%3A%2F%2Fimgsrc.baidu.com%2Fimgad%2Fpic%2Fitem%2F8b82b9014a90f6038de2556a3212b31bb051ed4a.jpg',
      'https://timgsa.baidu.com/timg?image&quality=80&size=b9999_10000&sec=1545220114942&di=3bf52981626b3cc290dd684df29e714c&imgtype=0&src=http%3A%2F%2Fimgsrc.baidu.com%2Fimgad%2Fpic%2Fitem%2F8b82b9014a90f6038de2556a3212b31bb051ed4a.jpg'
    ],
    interval: 5000,
    duration: 1000,
    circular: true,
    leftMargin: '80rpx',
    rightMargin: '80rpx',
    currentIndex: 0
  },
  handleChange: function (e) {
    this.setData({
      currentIndex: e.detail.current
    })
  },
})