banner效果美化
发布于 4 年前 作者 klai 1731 次浏览 来自 分享

先上图

wxss:

.bannerSwiper {
    height:300rpx;
    width100vw;
    position: absolute;
    left0rpx;
    top10rpx;
}
.imageBanner {
    width100%;
    height100%;
    border-radius20rpx;
    position: relative;
    padding0;
    line-height100%;
    background: transparent;
    text-align: left;
}

.imageBanner_small {
    transformscale(0.9);
    transition0.2s, ease-in 0s;
    border-radius10rpx;
    width100%;
    height100%;
    position: absolute;
    bottom0;
    z-index100;
    padding0;
    line-height100%;
    background: transparent;
    text-align: left;
    opacity0.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

回到顶部