### 小程序卡片式轮播图 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; } ```