微信小程序实现轮播图

swiper的相关属性

indicator-dots 是否显示小圆点，也可以自己重新设置小圆点

circular 是否衔接滑动，就是实现无限滚动

previous-margin 与上一张图片的间距

next-margin 与下一张图片的间距

autoplay 实现自动滚动 

 

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

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

Page({

 

data: {

currentIndex: 0

},

 

onLoad: function (options) {

 

},

/* 这里实现控制中间凸显图片的样式 */

handleChange: function (e) {

this.setData({

currentIndex: e.detail.current

})

},

})