如图上效果:
实现代码如下:
index.wxml
<view class="container">
<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="http://img1.imgtn.bdimg.com/it/u=2591172620,1260383735&fm=26&gp=0.jpg"></image>
</swiper-item>
</block>
</swiper>
<view style="height:50rpx"></view>
<swiper indicator-dots class="swiperContainer" bindchange="swiperChange" previous-margin="30rpx" next-margin="30rpx" autoplay="{{false}}">
<block wx:for="{{3}}" wx:key="{{index}}">
<swiper-item class="swiperitem">
<image class="swiperItemImgs {{swiperIndex==index?'swiperitemImg'+swiperIndex:''}}" src="http://img1.imgtn.bdimg.com/it/u=2591172620,1260383735&fm=26&gp=0.jpg"></image>
</swiper-item>
</block>
</swiper>
</view>
index.wxss
page{
background: #f1f1f1;
}
.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;
}
.swiperContainer{
width: 100%;
min-height: 502rpx;
}
.swiperitem{
height: 460rpx;
}
.swiperItemImgs{
position: absolute;
width: 100%;
height: 460rpx;
box-sizing: border-box;
}
.swiperitemImg0{
padding-right: 30rpx;
}
.swiperitemImg1{
padding: 0 30rpx;
}
.swiperitemImg2{
padding-left: 30rpx;
}
index.js
Page({
/**
* 页面的初始数据
*/
data: {
currentIndex: 0,
swiperIndex: 0
},
/* 这里实现控制中间凸显图片的样式 */
handleChange: function (e) {
this.setData({
currentIndex: e.detail.current
})
},
swiperChange: function (e) {
this.setData({
swiperIndex: e.detail.current
})
},
/**生命周期函数--监听页面加载*/
onLoad: function (options) {
}
})