效果是这样子的:
上代码:
1、html代码
<!--package1/pages/invite/invite.wxml--> <view class="invite"> <swiper class='swiper-block mySwiper' autoplay='true' circular='true' previous-margin='125rpx' next-margin='90rpx' current='0' bindchange='swiperChange' > <block wx:key='img' wx:for='{{swiperImgUrls}}'> <swiper-item class='swiper-item'> <image mode='aspectFill' src='{{item}}' class='slide-image {{swiperIndex == index ? "active" : ""}}' /> </swiper-item> </block> </swiper> <!-- 分页器 --> <view class="swiperPages"> <view wx:for="{{ pageList }}" wx:key="index" class="{{ item.pagetype == swiperIndex ? 'viewActive' : '' }}"></view> </view> </view> 2、css代码 page { background-color: #f5f5f5; height: 100%; } .invite { width: 100%; height: 100%; padding-top: 50rpx; box-sizing: border-box; } /* 轮播图 */ .swiper-block { height: 935rpx; width: 100%; } .swiper-item { display: flex; flex-direction: column; justify-content: center; align-items: flex-start; overflow: unset; box-sizing: border-box; } .slide-image { height: 800rpx; width: 460rpx; border-radius: 9rpx; margin: 0rpx 20rpx; z-index: 1; opacity: 0.5; } .active { transform: scale(1.14); transition: all 0.2s ease-in 0s; z-index: 20; opacity: 1; } /* swiperPages 分页器 */ .swiperPages { width: 100%; height: 70rpx; display: flex; justify-content: center; align-items: center; } .swiperPages view{ width: 10rpx; height: 10rpx; margin: 0 5rpx; border-radius: 100%; background-color: #ccc; } .swiperPages .viewActive{ background-color: #f70d06; } 3、js代码 data: { swiperImgUrls: [ '../../images/images/inviteSwiper1_03.png', '../../images/images/inviteSwiper1_03.png', '../../images/images/inviteSwiper1_03.png' ], swiperIndex: 0, // 分页器 pageList: [ {pagetype:0}, {pagetype:1}, {pagetype:2} ] },