实现效果

wxml代码

<view style="height:20rpx;"></view>
  <view class="swiper">
    <swiper class="swiper round-dot" indicator-dots="{{false}}" indicator-color="#fff" indicator-active-color="#97ffd7" circular="{{true}}" autoplay="{{true}}" previous-margin="60rpx" next-margin="60rpx" interval="5000" duration="800" bindchange="swiperChange">
            <block wx:for="{{swiperList}}" wx:for-item="item" wx:for-index="index" wx:key="index">
                <swiper-item style="text-align:center;">
                    <block wx:if="{{item.url}}">
                        <image src="{{item.url}}" mode="aspectFill" class="{{current==index?'swiper_img_big':'swiper_img'}}"></image>
                    </block>
                </swiper-item>
            </block>
        </swiper>
    </view>
  <view class="clear"></view>
  <view style="height:20rpx;"></view>

data中的数据

swiperList:[{
      'url':'/images/img/banner1@2x.png'
    },{
      'url':'/images/img/banner3@2x.png'
    },{
      'url':'/images/img/banner2@2x.png'
    }],//轮播图
    current:0,

轮播图方法

  //轮播图变化
  swiperChange(e){
    var _this = this
    // var list = _this.data.swiperList
    _this.setData({
      current:e.detail.current
    })
  },

css样式

.swiper{
  width: 100%;
  height: 278rpx;
  margin: auto;
}
.swiper_img_big{
  width: 590rpx;
  height: 278rpx;
  margin: auto;
  border-radius: 20rpx;
}
.swiper_img{
  width: 590rpx;
  height: 245rpx;
  margin: auto;
  border-radius: 20rpx;
  margin-top:16rpx;
}