原生小程序的 图片轮播 中间图放大效果 带分页器

效果是这样子的：

 

 上代码：

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}      ]   },
  /**    * 轮播滑动时，获取当前的轮播id    */   swiperChange(e) {     console.log(e)     const that = this;     that.setData({       swiperIndex: e.detail.current     },() => {       console.log(this.data.swiperIndex)     })   },   代码是没问题，图片记得自己换路径。 对面的小伙伴你辛苦了，加油！

原文地址：https://www.cnblogs.com/zhang-hong/p/14866140.html