微信小程序轮播图

实现效果

wxml代码

1<view style="height:20rpx;"></view>
2  <view class="swiper">
3    <swiper class="swiper round-dot" indicator-dots="{{false}}" indicator-color="#fff" indicator-active-color="#97ffd7" circular="{{true}}" autoplay="{{true}}" previous-margin="60rpx" next-margin="60rpx" interval="5000" duration="800" bindchange="swiperChange">
4			<block wx:for="{{swiperList}}" wx:for-item="item" wx:for-index="index" wx:key="index">
5				<swiper-item style="text-align:center;">
6					<block wx:if="{{item.url}}">
7						<image src="{{item.url}}" mode="aspectFill" class="{{current==index?'swiper_img_big':'swiper_img'}}"></image>
8					</block>
9				</swiper-item>
10			</block>
11		</swiper>
12	</view>
13  <view class="clear"></view>
14  <view style="height:20rpx;"></view>

data中的数据

1swiperList:[{
2      'url':'/images/img/banner1@2x.png'
3    },{
4      'url':'/images/img/banner3@2x.png'
5    },{
6      'url':'/images/img/banner2@2x.png'
7    }],//轮播图
8    current:0,

轮播图方法

1  //轮播图变化
2  swiperChange(e){
3    var _this = this
4    // var list = _this.data.swiperList
5    _this.setData({
6      current:e.detail.current
7    })
8  },

css样式

1.swiper{
2  width: 100%;
3  height: 278rpx;
4  margin: auto;
5}
6.swiper_img_big{
7  width: 590rpx;
8  height: 278rpx;
9  margin: auto;
10  border-radius: 20rpx;
11}
12.swiper_img{
13  width: 590rpx;
14  height: 245rpx;
15  margin: auto;
16  border-radius: 20rpx;
17  margin-top:16rpx;
18}