### 小程序卡片式輪播圖 1、js文件代碼如下： ``` Page({ /** * 頁面的初始數據 */ data: { imgUrls: [ 'https://images.unsplash.com/photo-1551334787-21e6bd3ab135?w=640', 'https://images.unsplash.com/photo-1551214012-84f95e060dee?w=640', 'https://images.unsplash.com/photo-1551446591-142875a901a1?w=640', 'https://images.unsplash.com/photo-1551334787-21e6bd3ab135?w=640', 'https://images.unsplash.com/photo-1551214012-84f95e060dee?w=640', 'https://images.unsplash.com/photo-1551446591-142875a901a1?w=640' ], indicatorDots: true, //是否顯示面板指示點 autoplay: true, //是否自動播放 interval: 3000, //停留時間間隔 duration: 1000, //播放時長 previousMargin: '50px', //前邊距，可用于露出前一項的一小部分，接受 px 和 rpx 值 nextMargin: '50px', //后邊距，可用于露出后一項的一小部分，接受 px 和 rpx 值 circular: true, //是否采用銜接滑動 currentSwiperIndex: 0, //swiper當前索引 }, swiperBindchange(e) { this.setData({ currentSwiperIndex: e.detail.current }) }, }) ``` 2、wxml代碼如下： ``` <swiper indicator-dots="{{indicatorDots}}" autoplay="{{autoplay}}" interval="{{interval}}" duration="{{duration}}" previous-margin="{{previousMargin}}" next-margin="{{nextMargin}}" circular="{{circular}}" bindchange="swiperBindchange" > <block wx:for="{{imgUrls}}"> <swiper-item> <image src="{{item}}" class="slide-image {{currentSwiperIndex == index ? 'zoom-in' : 'zoom-out'}}"/> </swiper-item> </block> </swiper> ``` 3、wxss文件代碼如下： ``` swiper{ margin-top: 50rpx; } .slide-image { width: 100%; height: 100%; } .zoom-out { transform: scale(0.8); transition: all 0.7s ease-out 0s; } .zoom-in { transform: scale(1); transition: all 0.7s ease-in 0s; } ```