微信小程序實現類3D輪播圖

在寫微信小程序時，有寫到實現3D輪播圖的效果，能夠直接使用微信小程序中自帶的組件swiper來實現

效果圖以下：

1.swiper的相關屬性

indicator-dots 是否顯示小圓點，也能夠本身從新設置小圓點 circular 是否銜接滑動，就是實現無限滾動 previous-margin 與上一張圖片的間距 next-margin 與下一張圖片的間距 autoplay 實現自動滾動

這裏主要利用了circular實現無限滾動，而後再加上先後間距，再設置圖片的層級和透明度就能夠實現了,將圖片及容器的高度設置好就差很少能夠實現了

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) {
  
  },
  /* 這裏實現控制中間凸顯圖片的樣式 */
  handleChange: function(e) {
    this.setData({
      currentIndex: e.detail.current
    })
  },
})
複製代碼

這裏推薦一下個人前端學習交流羣：784783012，裏面都是學習前端的，若是你想製做酷炫的網頁，想學習編程。本身整理了一份2018最全面前端學習資料，從最基礎的HTML+CSS+JS【炫酷特效，遊戲，插件封裝，設計模式】到移動端HTML5的項目實戰的學習資料都有整理，送給每一位前端小夥伴，有想學習web前端的，或是轉行，或是大學生，還有工做中想提高本身能力的，正在學習的小夥伴歡迎加入學習。