本文实例讲述了微信小程使用swiper组件实现图片轮播切换显示功能。分享给大家供大家参考，具体如下：

1、效果展示

2、关键代码

index.wxml：

swiper组件属性说明如下：

Box-sizing: border-Box; border-bottom: rgb(231,231,235) 1px solid; widows: 2; text-transform: none; background-color: rgb(255,255,255); margin-top: 1em; text-indent: 0px; border-spacing: 0px; width: 651px; display: table; border-collapse: collapse; font-family: 'Helvetica Neue','Hiragino Sans GB','Microsoft YaHei',黑体,Arial,sans-serif; orphans: 2; margin-bottom: 3em; letter-spacing: 0px; height: 667px; overflow: auto; word-spacing: 0px; -webkit-tap-highlight-color: transparent; text-size-adjust: none; -webkit-font-smoothing: antialiased; break-inside: avoid; -webkit-text-stroke-width: 0px"> Box-sizing: border-Box; -webkit-tap-highlight-color: transparent; text-size-adjust: none; -webkit-font-smoothing: antialiased"> Box-sizing: border-Box; border-bottom: medium none; border-left: medium none; background-color: rgb(246,248,249); border-top: medium none; border-right: medium none; -webkit-tap-highlight-color: transparent; text-size-adjust: none; -webkit-font-smoothing: antialiased; break-inside: avoid"> Box-sizing: border-Box; -webkit-tap-highlight-color: transparent; text-size-adjust: none; -webkit-font-smoothing: antialiased"> Box-sizing: border-Box; border-bottom: medium none; border-left: medium none; background-color: rgb(255,255); border-top: medium none; border-right: medium none; -webkit-tap-highlight-color: transparent; text-size-adjust: none; -webkit-font-smoothing: antialiased; break-inside: avoid">

Box-sizing: border-Box; border-bottom: medium none; text-align: left; border-left: medium none; padding-bottom: 6px; padding-left: 20px; padding-right: 20px; white-space: nowrap; height: 40px; color: rgb(141,141,141); border-top: medium none; font-weight: 400; border-right: medium none; padding-top: 6px; -webkit-tap-highlight-color: transparent; text-size-adjust: none; -webkit-font-smoothing: antialiased">属性名	Box-sizing: border-Box; border-bottom: medium none; text-align: left; border-left: medium none; padding-bottom: 6px; padding-left: 20px; padding-right: 20px; white-space: nowrap; height: 40px; color: rgb(141,141); border-top: medium none; font-weight: 400; border-right: medium none; padding-top: 6px; -webkit-tap-highlight-color: transparent; text-size-adjust: none; -webkit-font-smoothing: antialiased">类型	Box-sizing: border-Box; border-bottom: medium none; text-align: left; border-left: medium none; padding-bottom: 6px; padding-left: 20px; padding-right: 20px; white-space: nowrap; height: 40px; color: rgb(141,141); border-top: medium none; font-weight: 400; border-right: medium none; padding-top: 6px; -webkit-tap-highlight-color: transparent; text-size-adjust: none; -webkit-font-smoothing: antialiased">默认值	Box-sizing: border-Box; border-bottom: medium none; text-align: left; border-left: medium none; padding-bottom: 6px; padding-left: 20px; padding-right: 20px; white-space: nowrap; height: 40px; color: rgb(141,141); border-top: medium none; font-weight: 400; border-right: medium none; padding-top: 6px; -webkit-tap-highlight-color: transparent; text-size-adjust: none; -webkit-font-smoothing: antialiased">说明	Box-sizing: border-Box; border-bottom: medium none; text-align: left; border-left: medium none; padding-bottom: 6px; padding-left: 20px; padding-right: 20px; white-space: nowrap; height: 40px; color: rgb(141,141); border-top: medium none; font-weight: 400; border-right: medium none; padding-top: 6px; -webkit-tap-highlight-color: transparent; text-size-adjust: none; -webkit-font-smoothing: antialiased">最低版本
Box-sizing: border-Box; border-bottom: medium none; border-left: medium none; padding-bottom: 12px; padding-left: 20px; padding-right: 20px; height: 60px; border-top: medium none; border-right: medium none; padding-top: 12px; -webkit-tap-highlight-color: transparent; text-size-adjust: none; -webkit-font-smoothing: antialiased">indicator-dotsBox-sizing: border-Box; border-bottom: medium none; border-left: medium none; padding-bottom: 12px; padding-left: 20px; padding-right: 20px; height: 60px; border-top: medium none; border-right: medium none; padding-top: 12px; -webkit-tap-highlight-color: transparent; text-size-adjust: none; -webkit-font-smoothing: antialiased">BooleanBox-sizing: border-Box; border-bottom: medium none; border-left: medium none; padding-bottom: 12px; padding-left: 20px; padding-right: 20px; height: 60px; border-top: medium none; border-right: medium none; padding-top: 12px; -webkit-tap-highlight-color: transparent; text-size-adjust: none; -webkit-font-smoothing: antialiased">falseBox-sizing: border-Box; border-bottom: medium none; border-left: medium none; padding-bottom: 12px; padding-left: 20px; padding-right: 20px; height: 60px; border-top: medium none; border-right: medium none; padding-top: 12px; -webkit-tap-highlight-color: transparent; text-size-adjust: none; -webkit-font-smoothing: antialiased">是否显示面板指示点Box-sizing: border-Box; border-bottom: medium none; border-left: medium none; padding-bottom: 12px; padding-left: 20px; padding-right: 20px; height: 60px; border-top: medium none; border-right: medium none; padding-top: 12px; -webkit-tap-highlight-color: transparent; text-size-adjust: none; -webkit-font-smoothing: antialiased">Box-sizing: border-Box; background-color: rgb(255,255); border-top: rgb(231,235) 1px solid; -webkit-tap-highlight-color: transparent; text-size-adjust: none; -webkit-font-smoothing: antialiased; break-inside: avoid">	Box-sizing: border-Box; border-bottom: medium none; border-left: medium none; padding-bottom: 12px; padding-left: 20px; padding-right: 20px; height: 60px; border-top: medium none; border-right: medium none; padding-top: 12px; -webkit-tap-highlight-color: transparent; text-size-adjust: none; -webkit-font-smoothing: antialiased">indicator-colorBox-sizing: border-Box; border-bottom: medium none; border-left: medium none; padding-bottom: 12px; padding-left: 20px; padding-right: 20px; height: 60px; border-top: medium none; border-right: medium none; padding-top: 12px; -webkit-tap-highlight-color: transparent; text-size-adjust: none; -webkit-font-smoothing: antialiased">ColorBox-sizing: border-Box; border-bottom: medium none; border-left: medium none; padding-bottom: 12px; padding-left: 20px; padding-right: 20px; height: 60px; border-top: medium none; border-right: medium none; padding-top: 12px; -webkit-tap-highlight-color: transparent; text-size-adjust: none; -webkit-font-smoothing: antialiased">rgba(0,.3)Box-sizing: border-Box; border-bottom: medium none; border-left: medium none; padding-bottom: 12px; padding-left: 20px; padding-right: 20px; height: 60px; border-top: medium none; border-right: medium none; padding-top: 12px; -webkit-tap-highlight-color: transparent; text-size-adjust: none; -webkit-font-smoothing: antialiased">指示点颜色Box-sizing: border-Box; border-bottom: medium none; border-left: medium none; padding-bottom: 12px; padding-left: 20px; padding-right: 20px; height: 60px; border-top: medium none; border-right: medium none; padding-top: 12px; -webkit-tap-highlight-color: transparent; text-size-adjust: none; -webkit-font-smoothing: antialiased"> 3、源代码点击此处本站下载。 关于swiper详细说明还可参考官方文档：nofollow" target="_blank" href="https://mp.weixin.qq.com/debug/wxadoc/dev/component/swiper.html">https://mp.weixin.qq.com/debug/wxadoc/dev/component/swiper.html 希望本文所述对大家微信小程序开发有所帮助。 原文链接：https://www.f2er.com/js/34753.html swiper组件切换切换切换图片图片图片微信小程显示显示显示轮播 上一篇：JS中精巧的自动柯里化实现方法下一篇：javascript实现循环广告条效果 猜你在找的JavaScript相关文章 Javascript中的事件冒泡与捕获 事件冒泡和事件捕获 起因：今天在封装一个bind函数的时候，发现el.addEventListener函数支... 作者：前端之家 时间：2021-02-22 搞懂js中小数运算精度问题原因及解决办法 js小数运算会出现精度问题 js number类型 JS 数字类型只有number类型，number类型相当于其... 作者：前端之家 时间：2021-02-22 搞懂：前端跨域问题JS解决跨域问题VUE代理解决跨域问题原理 什么是跨域 跨域 ： 广义的跨域包含一下内容 ： 1.资源跳转（链接跳转，重定向跳转，表单提... 作者：前端之家 时间：2021-02-22 前端对base64编码的理解，原生js实现字符base64编码 @ "TOC" 常见对base64的认知(不完全正确) 首先对base64常见的认知，也是... 作者：前端之家 时间：2021-02-22 搞懂：MVVM模型以及VUE中的数据绑定数据劫持发布订阅模式 搞懂：MVVM模式和Vue中的MVVM模式 MVVM MVVM ： 的缩写，说都能直接说出来 ：模型， ：视图... 作者：前端之家 时间：2021-02-22 js判断浏览器是否支持webGL 起因是我之前开发的网页，用到了three.js制作了一个3d的旋转球体效果。 在各种浏览器上运行... 作者：前端之家 时间：2021-02-14 js判断undefined和null js判断undefined js判断null js判断null和undefined 作者：前端之家 时间：2021-02-14 将文字自动转为banner打印形式的工具 http://patorjk.com/software/taag/ 作者：前端之家 时间：2021-02-14 聊一聊 bootstrap 的轮播图插件 今天做工作的时候，轻车熟路的做完，又用到了bootstrap的轮播图，觉得有必要安利一下这个插... 作者：前端之家 时间：2021-02-14 js实现图片无缝循环跑马灯 html 代码 css js代码 function mylsRunHorseLight() { if (mylsTimer != null) { clearIn... 作者：前端之家 时间：2021-02-14 编程分类 HTMLHTML5JavaScriptCSSjQueryBootstrapAngularjsTypeScriptVueDojoJsonElectronNode.jsextjsExpress XMLES6AjaxFlashUnityReactFlexAnt DesignWeb前端微信小程序微信公众号 最新文章 • Javascript中的事件冒泡与 • 搞懂js中小数运算精度问题 • 搞懂：前端跨域问题JS解决 • 前端对base64编码的理解， • 搞懂：MVVM模型以及VUE中的 • js实现横向跑马灯效果 • js判断浏览器是否支持webG • js判断undefined和null • 将文字自动转为banner打印 • 聊一聊 bootstrap 的轮播图 热门标签 更多 ► 关闭广告单独headers封装代码提示错误整数正则非0开头跳页出页码antd table提示URL未注册公众号支付vue hash模式iSlider车牌键盘循环图片echarts 双折左右布局DllPlugin对象创建打字游戏圈选两栏云函数蒙版ES2020橱窗无缝滚动轮播色块碰撞组件销毁文档操作