微信小程序实现轮播图效果

更新时间：2017年09月07日 08:39:54 作者：切切歆语

这篇文章主要为大家详细介绍了微信小程序实现轮播图效果，具有一定的参考价值，感兴趣的小伙伴们可以参考一下

微信小程序实现轮播图，和网站，APP的效果差不多，代码少，效率高。

先来看看效果图：

主要用swiper + swiper-item来实现

 <view class='swiper'>滑块视图容器</view>

<!--
 indicator-dots='true' 是否显示指示点 默认 false
 indicator-color:指示点颜色
 indicator-active-color:选中的指示点颜色
 autoplay：是否自动切换 默认：false
 interval:自动切换时间间隔
 duration：滑动动画时长
 vertical 是否改成纵向， 默认 false
 -->

<swiper indicator-dots='true' indicator-color='gray' indicator-active-color='green' autoplay='true' interval='5000' duration='500'>
 <block wx:for="{{imgUrl}}">
  <swiper-item class="item_image">
   <image src='{{item}}' class='swiper_image' mode="aspectFill"></image>
  </swiper-item>
 </block>

</swiper>

一个简单的小案例，轮播图，代码简洁，功能强大。

源码点击下载

以上就是本文的全部内容，希望对大家的学习有所帮助，也希望大家多多支持脚本之家。

您可能感兴趣的文章:

手机端网页点击链接触发自动拨打或保存电话的示例代码
通过网页拨打电话，在点击链接时触发自动拨打或保存电话，此方法塞班、安卓与iphone都支持
2014-08-08
JavaScript Serializer序列化时间处理示例
JavaScriptSerializer序列化时间后会把时间序列化成N进制的鬼数据，下面有个示例，需要的朋友可以了解下
2014-07-07
cropperjs实现裁剪图片功能
这篇文章主要为大家详细介绍了cropperjs实现裁剪图片功能，文中示例代码介绍的非常详细，具有一定的参考价值，感兴趣的小伙伴们可以参考一下
2022-02-02
javascript实现tab切换特效
这篇文章主要介绍了javascript实现tab切换特效，实现的方法很简单，特别适合初学者学习javascript实现tab切换特效，tab切换再也不是问题，需要的朋友可以参考下
2015-11-11
基于Turn.js 实现翻书效果实例解析
最近项目经理我个项目练练手，其项目需求是要实现翻书效果，看到这个需求后，我真是懵了，这咋整，我可是java出身的啊，这个问题真是难住我了，后来有同事的指导，问题顺利解决，下面小编把学习心得分享，感兴趣的朋友可以参考下
2016-06-06
JavaScript中json对象和string对象之间相互转化
json对象和string对象之间的转化已经成为了大家耳熟能详的话题，本人今天就多啰嗦一些他们之间的故事，如有不对之处，还请各位海涵呢？不多说了直切主题
2012-12-12
Uniapp微信小程序实现全局事件监听并进行数据埋点的方法
niapp起源 uni-app是一个使用Vue.js开发所有前端应用的框架,下面这篇文章主要给大家介绍了关于Uniapp微信小程序实现全局事件监听并进行数据埋点的相关资料,需要的朋友可以参考下
2022-11-11
javascript 闭包详解
这篇文章主要详细介绍了javascript 闭包的相关资料，十分详尽,需要的朋友可以参考下
2015-02-02
通过一篇文章由浅入深的理解JSONP并拓展
这篇文章主要给大家介绍了关于理解JSONP并拓展的相关资料,文中通过实例代码介绍的非常详细,对大家的学习或者工作具有一定的参考学习价值,需要的朋友可以参考下
2022-01-01
javascript数组中的concat方法和splice方法
这篇文章主要介绍了javascript数组中的concat方法和splice方法，concat方法作用合并数组，可以合并一个或多个数组，会返回合并数组之后的数据，不会改变原来的数组，更多相关内容需要的小伙伴可以参考下面文章内容
2022-03-03