微信小程序实现轮播图

1.前端wxml代码

<!--index.wxml-->
<view>
  <view class="page-body">
    <view class="page-section page-section-spacing swiper" style="white:100%" style="height:250px">
      <swiper indicator-dots="{{indicatorDots}}"
        autoplay="{{autoplay}}" interval="{{interval}}" duration="{{duration}}" indicator-color="red" indicator-active-color="white" style="height:100%">
        <!-- 循环 -->
        <block wx:for="{{background}}" wx:key="*this">
          <swiper-item>
          <!-- {{item}}为每个图片的路径 -->
            <image src="{{item}}" mode="widthFix" class="image"></image>
          </swiper-item>
        </block>
      </swiper>
    </view>
    <view class="page-section" style="margin-top: 40rpx;margin-bottom: 0;">
      <view class="weui-cells weui-cells_after-title">
        <view class="weui-cell weui-cell_switch">
          <view class="weui-cell__bd">指示点</view>
          <view class="weui-cell__ft">
            <switch checked="{{indicatorDots}}" bindchange="changeIndicatorDots" />
          </view>
        </view>
        <view class="weui-cell weui-cell_switch">
          <view class="weui-cell__bd">自动播放</view>
          <view class="weui-cell__ft">
            <switch checked="{{autoplay}}" bindchange="changeAutoplay" />
          </view>
        </view>
      </view>
    </view>

    <view class="page-section page-section-spacing">
      <view class="page-section-title">
        <text>幻灯片切换时长(ms)</text>
        <text class="info">{{duration}}</text>
      </view>
      <slider bindchange="durationChange" value="{{duration}}" min="500" max="2000"/>
      <view class="page-section-title">
        <text>自动播放间隔时长(ms)</text>
        <text class="info">{{interval}}</text>
      </view>
      <slider bindchange="intervalChange" value="{{interval}}" min="2000" max="10000"/>
    </view>
  </view>
</view>

2.js代码

const app = getApp()

Page({
  onShareAppMessage() {
    return {
      title: 'swiper',
      path: 'page/component/pages/swiper/swiper'
    }
  },

  data: {
    // 图片路径可以写本地路径，也可写线上路径
    background: [
      'http://qy66342pz.hn-bkt.clouddn.com/h.JPG', 
      'http://qy66342pz.hn-bkt.clouddn.com/l.JPG', 
      'http://qy66342pz.hn-bkt.clouddn.com/f.JPG',
      'http://qy66342pz.hn-bkt.clouddn.com/g.JPG',
      'http://qy66342pz.hn-bkt.clouddn.com/b.JPG',
      'http://qy66342pz.hn-bkt.clouddn.com/d.JPG',
      'http://qy66342pz.hn-bkt.clouddn.com/k.JPG',
      'http://qy66342pz.hn-bkt.clouddn.com/a.JPG',
      'http://qy66342pz.hn-bkt.clouddn.com/i.JPG',
      'http://qy66342pz.hn-bkt.clouddn.com/c.JPG'
    ],
    indicatorDots: true,
    vertical: false,
    autoplay: false,
    //间隔时长默认值
    interval: 2000,
    //切换时长默认值
    duration: 500
  },

  changeIndicatorDots() {
    this.setData({
      indicatorDots: !this.data.indicatorDots
    })
  },

  changeAutoplay() {
    this.setData({
      autoplay: !this.data.autoplay
    })
  },

  intervalChange(e) {
    this.setData({
      interval: e.detail.value
    })
  },

  durationChange(e) {
    this.setData({
      duration: e.detail.value
    })
  }
})

3.wxss代码（注：此样式是为了让图片宽度占到100%）

.swiper{ 
  width: 100%;
  height: calc(100vw*200/640);
}

.image{
  width: 100%;
}