本文例項為大家分享了微信小程式實現帶放大效果的輪播圖，供大家參考，具體內容如下

效果如圖

WXML

<!-- 輪播圖 -->
 <view class='Carousel'>
  <view class="recommend">
   <view class="swiper-container">
    <swiper class="swiper" autoplay="auto" interval="2000" duration="500" bindchange="swiperChange" previous-margin="40px" next-margin="40px" circular="true">
     <block wx:for="{{slider}}" wx:key="unique">
      <swiper-item data-url="{{item.linkUrl}}">
       <image class='{{swiperCurrent==item.imgId?"img_current":"img"}}' src="{{item.picUrl}}" mode="widthFix"></image>
      </swiper-item>
     </block>
    </swiper>
    <!-- 指示點 -->
    <!-- <view class="dots">
     <block wx:for="{{slider}}" wx:key="unique">
      <view class="dot{{index == swiperCurrent ? ' active' : ''}}" bindtap="chuangEvent" id="{{index}}">{{index+1}}</view>
     </block>
    </view> -->
   </view>
  </view>
</view>

WXSS

.Carousel{
 margin-top: 49px;
 background-color: #fff;
}
.swiper-container{
 position: relative;
}
.swiper-container .swiper{
 padding-top: 8px;
 height: 380rpx;
 text-align: center;
}
swiper-item{
 display: flex;
 align-items: center;
 justify-content: space-around;
}
.swiper-container .swiper .img{
 width: 88%;
 height: 88%;
 border-radius: 10px;
}
.img_current{
 width: 100%;
 height: 100%;
 border-radius: 10px;
}
.swiper-container .dots{
 position: absolute;
 right: 40rpx;
 bottom: 20rpx;
 display: flex;
 justify-content: center;
}
.swiper-container .dots .dot{
 width: 28rpx;
 height: 28rpx;
 margin: 0 10rpx;
 border-radius: 50%;
 background: #fff;
 transition: all .6s;
 font: 300 18rpx/28rpx "microsoft yahei";
 text-align: center;
}
.swiper-container .dots .dot.active{
 background: #f80;
 color:#fff;
}

JS

data: {  
  //輪播圖
  slider: [
   { imgId: '0',linkUrl: 1,picUrl: '/images/swiper/swiper_1.png' },{ imgId: '1',linkUrl: 2,picUrl: '/images/swiper/swiper_2.png' },{ imgId: '2',linkUrl: 3,picUrl: '/images/swiper/swiper_3.png' },],swiperCurrent: 0,}
  
   /**
  * 輪播圖
  */
 swiperChange: function (e) {
  //把切換後當前的index傳給<swiper>元件的current屬性
  this.setData({
   swiperCurrent: e.detail.current
  })
 },//點選指示點切換
 // chuangEvent: function (e) {
 //  this.setData({
 //   swiperCurrent: e.currentTarget.id
 //  })
 // },

以上就是本文的全部內容，希望對大家的學習有所幫助，也希望大家多多支援我們。