先上图：
wxml
<swiper class="first" indicator-dots="{{indicatorDots}}" autoplay="{{true}}" interval="5000" duration="500" circular="{{true}}" display-multiple-items="5" skip-hidden-item-layout="true" bindchange="swiperChange"> <block wx:for="{{swiperList}}" wx:key="index"> <swiper-item class="{{ index == activeIndex ? 'active' : ( (index + 1 == activeIndex) || (index - 1 == activeIndex) || (index + swiperList.length -1 == activeIndex) || (index - swiperList.length + 1 == activeIndex) ? 'activeThen' : '' )}}"> <view class="item-block"> <image src="{{item}}" mode="aspectFill"></image> </view> </swiper-item> </block> </swiper>wxss
swiper.first{ margin-top: 10px; height: 350rpx; text-align: center; } .first swiper-item{ overflow: unset; } .first swiper-item .item-block{ height: 150rpx; padding-top: 80rpx; transition: all 0.3s; } .first swiper-item .item-block image{ width: 90%; border: 1px solid #d8d8d8; height: 100%; border-radius: 6rpx; } /* 最中间的图片 */ .first swiper-item.active{ z-index: 3; } .first swiper-item.active .item-block{ padding-top: 0; } .first swiper-item.active .item-block image{ width: 340%; height: 310rpx; margin-left: -125%; } /* 第二级图片 */ .first swiper-item.activeThen{ z-index: 2; } .first swiper-item.activeThen .item-block{ padding-top: 40rpx; } .first swiper-item.activeThen .item-block image{ width: 230%; height: 230rpx; margin-left: -70%; }js
Page({ data: { swiperList: ['/images/1.jpg','/images/2.jpg','/images/1.jpg','/images/2.jpg','/images/1.jpg','/images/2.jpg','/images/1.jpg','/images/2.jpg'], activeIndex: 2 }, swiperChange(e) { if(e.detail.current >= this.data.swiperList.length - 2) { e.detail.current = e.detail.current - this.data.swiperList.length } this.setData({ activeIndex: e.detail.current + 2 }) }, })