微信小程序开发广告轮播幻灯图制作设计

微信自带提供swiper这个插件的常用属性

indicator-dots 是否显示面板指示点

autoplay 是否自动切换

interval 自动切换时间间隔

duration 滑动动画时长

先看看做好以后达到效果是如何的：

1、样式文件代码：

/* 直接设置swiper属性 */
swiper {
  height: 300rpx;
}
swiper-item image {
  width: 100%;
  height: 100%;
}

2、js数据调用文件

// banner
    imgUrls: [
      'http://mz.djmall.xmisp.cn/files/banner/20161219/148211980641.png',
      'http://mz.djmall.xmisp.cn/files/banner/20161222/148238831285.png',
      'http://mz.djmall.xmisp.cn/files/banner/20161222/14823895573.png'
    ],
    indicatorDots: true, //是否显示面板指示点
    autoplay: true, //是否自动切换
    interval: 3000, //自动切换时间间隔,3s
    duration: 1000, //  滑动动画时长1s

3、页面调用轮播幻灯代码：

<!-- banner -->
  <swiper indicator-dots="{{indicatorDots}}" autoplay="{{autoplay}}" interval="{{interval}}" duration="{{duration}}">
    <block wx:for="{{imgUrls}}">
      <swiper-item>
        <image src="{{item}}" />
      </swiper-item>
    </block>
  </swiper>

模板简介：该模板名称为【微信小程序开发广告轮播幻灯图制作设计】，大小是，文档格式为.，推荐使用打开，作品中的图片，文字等数据均可修改，图片请在作品中选中图片替换即可，文字修改直接点击文字修改即可，您也可以新增或修改作品中的内容，该模板来自用户分享，如有侵权行为请联系网站客服处理。欢迎来懒人模板【小程序教程】栏目查找您需要的精美模板。