微信小程序实训之轮播图效果

6.轮播图效果

轮播图是大部分应用的一个常用的功能，常用于广告投放、产品展示、活动展示等等。

漂亮的轮播图效果可以吸引用户的点击，达到推广产品的作用。

*业务需求：*

5个图片轮番播放，可以左右滑动，点击指示点可以切换图片

重点说明

1.添加目录和图片内容。

由于微信小程序，整个项目编译后的大小不能超过1M，编码之前需准备三张图片把它放在image目录里面。

image-20211218160101078.png

2.使用组件：

这里使用小程序提供的<swiper>组件，swiper组件里面有三个swiper-item，这三个swiper-item是用来进行轮播的，在这三个swiper-item里面分别添加image标签，并给image标签的src属性写上图片对应的路径。

由于<swiper>组件提供的指示点样式比较单一，另外再自定义指示点的样式。 2.设置轮播图样式

/* 设置轮播图样式 */
.lunbo{
    width: 100%;
}
.lunbo image{width: 100%;}

3.目前只有鼠标左右拖动，图片才会滚动，设置自动

autoplya='auto'  indicator-dots='true'interval="5000"

indicator-dots，它的意思是在图片下方加上小圆点

autoplay：自动播放

interval：自动切换时间

duration：滑动动画的时长

current：当前所在的页面

bindchange：current 改变时会触发 change 事件

4.效果图