banner效果美化

先上图

wxss:

.bannerSwiper {
    height:300rpx;
    width: 100vw;
    position: absolute;
    left: 0rpx;
    top: 10rpx;
}
.imageBanner {
    width: 100%;
    height: 100%;
    border-radius: 20rpx;
    position: relative;
    padding: 0;
    line-height: 100%;
    background: transparent;
    text-align: left;
}

.imageBanner_small {
    transform: scale(0.9);
    transition: 0.2s, ease-in 0s;
    border-radius: 10rpx;
    width: 100%;
    height: 100%;
    position: absolute;
    bottom: 0;
    z-index: 100;
    padding: 0;
    line-height: 100%;
    background: transparent;
    text-align: left;
    opacity: 0.5;
}

wxml:

<view class="container">
    <swiper class='bannerSwiper' previous-margin="80rpx" next-margin='80rpx' indicator-dots="true" indicator-color='#999' indicator-active-color='#fff' indicator-dots="{{indicatorDots}}" autoplay="{{autoplay}}" interval="{{interval}}"
      duration="{{duration}}" bindchange='onChange' circular='true'>
      <block wx:for="{{banner}}">
        <swiper-item>
          <image  class="{{index==selindex?'imageBanner':'imageBanner_small'}}" style="background:{{item}}"></image>
        </swiper-item>
      </block>
    </swiper>
</view>

github地址：https://github.com/jieqwer/-Banner