微信小程序图片轮播

微信小程序图片轮播的实现，支持自动轮播

目录结构如下：

index.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>

index.wxss代码：

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

index.js代码：

var app = getApp()Page({  data: {    imgUrls: [      'http://img02.tooopen.com/images/20150928/tooopen_sy_143912755726.jpg',      'http://img06.tooopen.com/images/20160818/tooopen_sy_175866434296.jpg',      'http://img06.tooopen.com/images/20160818/tooopen_sy_175833047715.jpg'    ],    indicatorDots: true,    autoplay: true,    circular: true,    interval: 5000,    duration: 1000  }})

参数详解：

最终效果：

快来动手试试吧！