微信小程式實例：實作3D輪播圖特效程式碼

這篇文章帶給大家的內容是關於微信小程式實例：實作3D輪播圖特效程式碼，有一定的參考價值，有需要的朋友可以參考一下，希望對你有幫助。

在寫微信小程式時，有寫到實作3D輪播圖的效果，可以直接使用微信小程式中自帶的元件swiper來實作

效果圖如下：

1.swiper的相關屬性

indicator-dots 是否顯示小圓點，也可以自己重新設定小圓點

circular 是否銜接滑動，就是實現無限滾動

previous-margin 與上一張圖片的間距

next-margin 與下一張圖片的間距

autoplay 實現自動滾動

這裡主要利用了circular實現無限滾動，然後再加上前後間距，再設置圖片的層級和透明度就可以實現了,將圖片及容器的高度設置好就差不多可以實現了

wxml檔

<!--carousel/index.wxml-->
<swiper>
  <block>
    <swiper-item>
      <image></image>
    </swiper-item>
  </block>
</swiper>

wxss檔

/* carousel/index.wxss */
page{
  background: #f7f7f7f7;
}
.imageContainer{
  width: 100%;
  height: 500rpx;
  background: #000;
}
.item{
  height: 500rpx;
}
.itemImg{
  position: absolute;
  width: 100%;
  height: 380rpx;
  border-radius: 15rpx;
  z-index: 5;
  opacity: 0.7;
  top: 13%;
}
.active{
  opacity: 1;
  z-index: 10;
  height: 430rpx;
  top: 7%;
  transition:all .2s ease-in 0s;
}

JS檔

// carousel/index.js
Page({

  data: {
    currentIndex: 0
  },

  onLoad: function (options) {
  
  },
  /* 这里实现控制中间凸显图片的样式 */
  handleChange: function(e) {
    this.setData({
      currentIndex: e.detail.current
    })
  },
})

相關推薦：

#微信小程式輪播圖功能開發實例

微信小程式完成輪播圖效果的實例分享

#

以上是微信小程式實例：實作3D輪播圖特效程式碼的詳細內容。更多資訊請關注PHP中文網其他相關文章！