微信小程序?qū)嵗簩崿F(xiàn)3D輪播圖特效代碼

小編給大家分享一下微信小程序?qū)嵗簩崿F(xiàn)3D輪播圖特效代碼，希望大家閱讀完這篇文章之后都有所收獲，下面讓我們一起去探討吧！

創(chuàng)新互聯(lián)建站是一家專注于網(wǎng)站制作、網(wǎng)站建設(shè)與策劃設(shè)計,大化網(wǎng)站建設(shè)哪家好?創(chuàng)新互聯(lián)建站做網(wǎng)站,專注于網(wǎng)站建設(shè)10年,網(wǎng)設(shè)計領(lǐng)域的專業(yè)建站公司;建站業(yè)務(wù)涵蓋:大化等地區(qū)。大化做網(wǎng)站價格咨詢:18980820575

在寫微信小程序時，有寫到實現(xiàn)3D輪播圖的效果，可以直接使用微信小程序中自帶的組件swiper來實現(xiàn)

效果圖如下：

1.swiper的相關(guān)屬性

indicator-dots 是否顯示小圓點，也可以自己重新設(shè)置小圓點

circular 是否銜接滑動，就是實現(xiàn)無限滾動

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

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

autoplay 實現(xiàn)自動滾動

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

wxml文件

<!--carousel/index.wxml-->
<swiper class="imageContainer" bindchange="handleChange" previous-margin="50rpx" next-margin="50rpx" circular autoplay>
  <block wx:for="{{3}}" wx:key="{{index}}">
    <swiper-item class="item">
      <image class="itemImg {{currentIndex == index ? 'active': ''}}" src="../../../image/3.jpg"></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) {
  
  },
  /* 這里實現(xiàn)控制中間凸顯圖片的樣式 */
  handleChange: function(e) {
    this.setData({
      currentIndex: e.detail.current
    })
  },
})

看完了這篇文章，相信你對“微信小程序?qū)嵗簩崿F(xiàn)3D輪播圖特效代碼”有了一定的了解，如果想了解更多相關(guān)知識，歡迎關(guān)注創(chuàng)新互聯(lián)行業(yè)資訊頻道，感謝各位的閱讀！

網(wǎng)站欄目：微信小程序?qū)嵗簩崿F(xiàn)3D輪播圖特效代碼
當(dāng)前URL：http://m.kartarina.com/article22/gicjcc.html

成都網(wǎng)站建設(shè)公司_創(chuàng)新互聯(lián)，為您提供企業(yè)建站、網(wǎng)站維護(hù)、服務(wù)器托管、網(wǎng)站導(dǎo)航、電子商務(wù)、全網(wǎng)營銷推廣

廣告

聲明：本網(wǎng)站發(fā)布的內(nèi)容（圖片、視頻和文字）以用戶投稿、用戶轉(zhuǎn)載內(nèi)容為主，如果涉及侵權(quán)請盡快告知，我們將會在第一時間刪除。文章觀點不代表本網(wǎng)站立場，如需處理請聯(lián)系客服。電話：028-86922220；郵箱：631063699@qq.com。內(nèi)容未經(jīng)允許不得轉(zhuǎn)載，或轉(zhuǎn)載時需注明來源： 創(chuàng)新互聯(lián)