大家好，我们又见面了，今天我来教给大家如何制作小程序的轮播图。其实轮播图大家应该又不陌生，在很多网站上都有轮播图，比如京东首页就有轮播图，如图：

  轮播图

  由于图片是静态的，展示不出效果，大家可以自行去京东看一下轮播图的效果（不是打广告哦）。那么，在微信小程序上我们又是如何来实现轮播图的制作呢，Let‘s Go！

  大家还是打开自己的项目，我们上一章中已经创建了post目录，我们今天的代码编写就是在post.wxml文件编写，

  不过在编码之前大家需要自己找三张图片把它放在我们的image目录里面，如图所示：

image目录

  我的image目录里现在有四张图片，有一张是首页的图片，其余三张就是为轮播图而做准备的，这些前期工作做完之后我们就开始进行我们的编码，如图：

轮播图代码

  微信小程序开发轮播图特别简单，就是调用swiper组件，大家不用去管它是什么意思，只需要记住swiper组件是用来做轮播图的就行了，因为前端的东西基本上都是死记硬背的。swiper组件里面有三个swiper-item，这三个swiper-item大家想都应该想到是用来进行轮播的，我在这三个swiper-item里面分别添加image标签，并给image标签的src属性写上图片对应的路径。那么我们来看一下效果吧：

第一张

  由于不是动态的图片，我只能把这三张图片给大家放上面，大家可以看看自己的界面是否实现了轮播的效果。虽然轮播实现了，但是这图片是不是宽度不够啊，不要紧，我们给最外层的swiper标签加个class，大家看了我前面的文章应该知道class是干什么用的吧，如果忘了赶紧去温习一下吧，（小程序）代码如图：

class属性

  我们给swiper一个class属性，值为lunbo，然后我们去post.wxss里面编写样式，如图：

样式

  我给大家解释一下这个样式，首先lunbo的样式我们给它一个width：100%，意思就是这个轮播组件的宽度为屏幕的宽度。下面的一句 .lunbo image的意思就是这个轮播组件里面的image标签，当然大家也可以给image加个class，方法很多，然后我们也给它一个width：100%，意思是图片的宽度等于轮播组件的宽度，那图片的宽度也是屏幕的宽度，所以我们来看一下效果图：

效果图

  大家可以惊奇地发现，图片的宽度和屏幕的宽度一样宽了。这样一来，我们的轮播图就大功告成了，仔细想想还是有点不妥，因为我们的轮播图只有我们自己用鼠标拖拽的时候才会轮播，我们能否让它自动轮播呢，当然可以，直接上代码：

post.wxml

  我们在swiper里面又加了三个属性，第一个属性是indicator-dots，它的意思是在图片下方加上小圆点，大家可以看看别的网站的轮播图，图片下方都会有小圆点，用来显示这是第几张图片。第二个属性是autoplay，这个很明显就是图片自动播放了，它的值我们设置为true，第三个属性是interval，意思是图片自动切换的时间间隔，我给的值是4000，它的单位是毫秒，也就是每隔4秒图片就会切换一次。大家把这些属性加上赶紧试试效果吧，今天的教学就到这里，咱们下次见喽~~

  特别希望大家能够多多关注我，多多收藏，多多分享，感谢观看。

微信小程序