在制作微信小程序时，要用到轮播图，查看了微信小程序官方的手册，仔细看了看分为两种实现方法。一种是自带的轮播图，也是默认的，另外一种是自定义轮播图。下面把这两种实现的方法都分享给大家，代码如下：

一.js代码如下：

//index.js
Page({

/**
  * 页面的初始数据
  */
data: {
/*轮播图 配置*/
imgUrls: [
'/images/lb1.png',
'/images/lb2.png',
'/images/lb3.png'
],
indicatorDots: true, // 是否显示面板指示点
indicatorColor: "#2d7dee", // 指示点颜色
afterColor: "white", // 当前选中的指示点颜色
autoplay: true, // 是否自动切换
interval: 5000, // 自动切换时间间隔
duration: 500, // 滑动动画时长
circular: true, // 是否采用衔接滑动
/*自定义轮播图 配置*/
slider: [
{ id: '0', linkUrl: 'pages/index/index', picUrl: '/images/lb1.png' },
{ id: '0', linkUrl: 'pages/index/index', picUrl: '/images/lb2.png' },
{ id: '0', linkUrl: 'pages/index/index', picUrl: '/images/lb3.png' }
],
swiperCurrent: 0
},

/**
  * 生命周期函数--监听页面加载
  */
onLoad: function (options) {

},

//轮播图的切换事件 
swiperChange: function (e) {
//只要把切换后当前的index传给<swiper>组件的current属性即可 
this.setData({
swiperCurrent: e.detail.current
})
},
//点击指示点切换 
chuangEvent: function (e) {
this.setData({
swiperCurrent: e.currentTarget.id
})
}
})

二.页面代码如下：

<!--index.wxml-->
<view>
<!-- 轮播图 -->
<swiper class="swiper" indicator-dots="{{indicatorDots}}" 
indicator-active-color="{{afterColor}}"
autoplay="{{autoplay}}" indicator-color="{{indicatorColor}}" 
interval="{{interval}}" duration="{{duration}}" circular="{{circular}}">
<block wx:for="{{imgUrls}}" wx:key="id">
<swiper-item>
<image src="{{item}}" class="slide-image" />
</swiper-item>
</block>
</swiper>
<!-- 自定义轮播图 -->
<view class="swiper-container"> 
<swiper circular="true" autoplay="auto" interval="5000" duration="500" 
current="{{swiperCurrent}}" bindchange="swiperChange" class="swiper"> 
<block wx:for="{{slider}}" wx:key="unique"> 
<swiper-item data-id="{{item.id}}" data-url="{{item.linkUrl}}"> 
<image src="{{item.picUrl}}" class="img"></image> 
</swiper-item> 
</block> 
</swiper> 
<view class="dots"> 
<block wx:for="{{slider}}" wx:key="unique"> 
<view class="dot{{index == swiperCurrent ? ' active' : ''}}" bindtap="chuangEvent" 
id="{{index}}">{{index+1}}</view> 
</block> 
</view> 
</view>
</view>

三.样式代码如下：

/**index.wxss**/
/**轮播图 start**/
.swiper {
height: 400rpx;
width: 100%;
}
.swiper image {
height: 100%;
width: 100%;
}
/**轮播图 end**/
/**自定义轮播图 start**/
.swiper-container{
position: relative;
}
.swiper-container .swiper{
height: 400rpx;
}
.swiper-container .swiper .img{
width: 100%;
height: 100%;
}
.swiper-container .dots{
position: absolute;
right: 40rpx;
bottom: 20rpx;
display: flex;
justify-content: center;
}
.swiper-container .dots .dot{
margin: 0 10rpx;
width: 28rpx;
height: 28rpx;
background: #fff;
border-radius: 50%;
transition: all .6s;
font: 300 18rpx/28rpx "microsoft yahei";
text-align: center;
}
.swiper-container .dots .dot.active{
background: #f80;
color:#fff;
}
/**自定义轮播图 end**/

四.运行的结果如下图：

程序员你不是一个人战斗，欢迎加小编微信：xnynews 加入500人微信群，一起学习，一起进步，一起分享资源！（备注：云码素材)

欢迎关注云码素材，交流分享! 云码素材原创作品，更多精品资源下载，技术分享请关注，私信云码素材！云码素材原创作品，转载请联系微信：xnynews

入群分享

我要加群：资源共享的时代，不要再单打独斗！加小编微信号加入群：xnynews(备注：云码素材入群)，qq群号：202498279,一起技术学习，资源分享！