前端特效：小程序轮播图（旋转木马方式）

样式预览

                   

html部分

<view class='slide'>

<swiper class='picker' circular previous-margin='80rpx' next-margin="80rpx" bindchange="bindchange" autoplay='true' >

<swiper-item wx:for="{{数据列表}}" wx:key="index" id="{{index}}">

<view class='picker-one'>

<image src='{{图片地址}' class='{{showindex==index?"imgs":"imgs1"}}' ></image>

</view>

</swiper-item>

</swiper>

</view>

 

css部分

.slide{

width: 100%;

height: 300rpx;

}

.slide>.picker{

width: 100%;

height: 300rpx;

}

.slide>.picker .picker-one{

width:100%;

height: 300rpx;

}

.slide>.picker .picker-one{

width:100%;

height: 300rpx;

position: relative;

}

.slide>.picker .picker-one .imgs{

width: 590rpx;

height: 222rpx;

position: absolute;

top: 0;

left: 0;

bottom: 0;

right: 0;

margin: auto;

border-radius: 20rpx;

transform: scale(1);

animation: change 0.5s linear

}

@keyframes change{

0%{transform: scale(0.8)}

100%{transform: scale(1);}

}

.slide>.picker .picker-one .imgs1{

width: 590rpx;

height: 222rpx;

position: absolute;

top: 0;

left: 0;

bottom: 0;

right: 0;

margin: auto;

border-radius: 20rpx;

transform: scale(0.8);

animation: change1 0.5s linear

}

@keyframes change1{

0%{transform: scale(1)}

100%{transform: scale(0.8);}

}

 

js部分

data:{

showindex:0

}

bindchange(e) {

this.setData({

showindex: e.detail.current

})

},