微信小程序图片轮播效果

一.页面效果wxml代码：

<swiper class="swiper" indicator-dots="{{indicatorDots}}"

autoplay="{{autoplay}}" interval="{{interval}}" duration="{{duration}}">

<block wx:for="{{imgUrls}}">

<swiper-item>

<image src="{{item}}" class="slide-image"/>

</swiper-item>

</block>

</swiper>

二.js控制轮播图片代码部分：

data: {//初始值

TbBackgroundColor:"white",

imgUrls: [//图片路径

'/index/img/02.jpg',

'/index/img/03.jpg',

'/index/img/04.jpg',

'/index/img/05.jpg',

'/index/img/06.jpg',

'/index/img/07.jpg',

],

indicatorDots: true,

autoplay: true,

circular: true,

interval: 2000,

duration: 1000

},

三.样式wxss部分代码：

.swiper{margin-top: 20px;width: 100%;height: 200px}

.slide-image{width: 100%;height: 100%}