微信小程序商城15天从零实战视频课程-知识点-图片轮播

两种实现方式：
纯wxml和带js的实现
微信小程序交流群：111733917 | 微信小程序从0基础到就业的课程：https://edu.csdn.net/topic/huangjuhua

js代码

// pages/tmp/tupian/01-lunbo.js
Page({

  /**
   * 页面的初始数据
   */
  data: {
    images: [
      'http://www.yaoyiwangluo.com/upload/ban2.jpg',
      'http://www.yaoyiwangluo.com/upload/ban3.jpg',
      'http://www.yaoyiwangluo.com/upload/ban4.jpg',
    ],
    indicatorDots: true,
    vertical: false,
    autoplay: true,
    interval: 3000,
    duration: 1200
  },

  /**
   * 生命周期函数--监听页面加载
   */
  onLoad: function (options) {

  },

  /**
   * 生命周期函数--监听页面初次渲染完成
   */
  onReady: function () {

  },

  /**
   * 生命周期函数--监听页面显示
   */
  onShow: function () {

  },

  /**
   * 生命周期函数--监听页面隐藏
   */
  onHide: function () {

  },

  /**
   * 生命周期函数--监听页面卸载
   */
  onUnload: function () {

  },

  /**
   * 页面相关事件处理函数--监听用户下拉动作
   */
  onPullDownRefresh: function () {

  },

  /**
   * 页面上拉触底事件的处理函数
   */
  onReachBottom: function () {

  },

  /**
   * 用户点击右上角分享
   */
  onShareAppMessage: function () {

  }
})

wxml代码

  <swiper  indicator-dots="{{indicatorDots}}" vertical="{{vertical}}"
         autoplay="{{autoplay}}" interval="{{interval}}" duration="{{duration}}" >

    <block wx:for="{{images}}" wx:key="item.id">
      <swiper-item>
      <image src="{{item}}" class="slide-image"/>
      </swiper-item>
    </block>

  </swiper>

  <!---
  indicator-dots	Boolean	 false	是否显示面板指示点
  vertical      	Boolean	 false	滑动方向是否为纵向
  autoplay      	Boolean	 false	是否自动切换
  interval      	Number	5000	自动切换时间间隔
  duration	      Number	500	滑动动画时长
  --->

    <swiper  indicator-dots="{{true}}" vertical="{{false}}"
         autoplay="{{true}}" interval="3000" duration="1200" >
 
      <swiper-item>
      <image src="http://www.yaoyiwangluo.com/upload/ban3.jpg" class="slide-image"/>
      </swiper-item>

      <swiper-item>
      <image src="http://www.yaoyiwangluo.com/upload/ban4.jpg" class="slide-image"/>
      </swiper-item>

  </swiper>

wxss代码

.slide-image {
  /* pages/tmp/index.wxss */
  height: 100%;
  width: 100%;
  display: inline-block;
  overflow: hidden;
}

[欢迎大家收看我的视频教程：微信小程序商城15天从零实战视频课程](https://ke.qq.com/course/382725?tuin=2b10d56