Swiper是純javascript打造的滑動特效插件，面向手機、平板電腦等移動終端。
Swiper能實現觸屏焦點圖、觸屏Tab切換、觸屏多圖切換等常用效果。
Swiper開源、免費、穩定、使用簡單、功能強大，是架構移動終端網站的重要選擇！
在寫微信小程序時，有寫到實現3D輪播圖的效果，可以直接使用微信小程序中自帶的組件swiper來實現
效果圖如下：
1.swiper的相關屬性
這里主要利用了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.jsPage({ data: { currentIndex: 0 }, onLoad: function (options) { }, /* 這里實現控制中間凸顯圖片的樣式 */ handleChange: function(e) { this.setData({ currentIndex: e.detail.current }) },})總結
以上所述是小編給大家介紹的微信小程序使用swiper組件實現類3D輪播圖，希望對大家有所幫助，如果大家有任何疑問請給我留言，小編會及時回復大家的。在此也非常感謝大家對武林網網站的支持！
新聞熱點
疑難解答
