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