微信小程序实现图片轮播：使用 小程序原生组件swiper和swiper-item来实现。

一、官方文档中swiper和swiper-item的介绍：

Swiper

Swiper-item

二、开发实现

效果图

1.index.wxml

图片轮播

<!--pages/index/index.wxml-->
<view class="containerBox"><view class="swiperMain"><swiper  bindchange="swiperChange"indicator-dots="{{indicatorDots}}" indicator-color="{{indicatorColor}}" autoplay="{{autoplay}}" circular="{{circular}}" vertical="{{vertical}}"interval="{{interval}}" duration="{{duration}}" indicator-active-color="{{indicatorActiveColor}}"><block wx:for="{{tpList}}" wx:for-item="tpTeam" id="{{tpTeam.id}}" class="imgClass"><swiper-item><image class="swiperImg" src="{{tpTeam.img_url}}" mode="scaleToFill"></image></swiper-item></block></swiper><view class="dots" wx:if="{{!indicatorDots}}"><block wx:for="{{tpList}}" wx:key="*"><view class="dot{{index == current ? ' active' : ''}}"></view></block></view>  </view>
</view>

2.index.js

// pages/index/index.js
var app=getApp();//获取当前小程序的实例，方便使用全局方法和属性Page({/*** 页面的初始数据*/data: {//设置页面数据，后面空值将在页面显示时通过请求服务器获取//swiper图片轮播配置项indicatorDots: true,//是否显示面板指示点，默认falseindicatorColor:"rgba(255,255,255,0.5)",//指示点颜色indicatorActiveColor:"rgba(255,255,255,1)",//当前选中的指示点颜色autoplay: false,//是否自动切换，默认falsecircular: true, // 是否采用衔接滑动，默认falseinterval: 2000, // 自动切换时间间隔duration: 500, //滑动动画时长previousMargin:"0px", //前边距nextMargin:"0px", // 后边距current: 0, // 当前所在滑块的indextpList:[{id:1,"img_url":"http://seopic.699pic.com/photo/50045/9931.jpg_wh1200.jpg"},{id:2,"img_url":"http://img.sccnn.com/bimg/341/16337.jpg"}],},/*** 生命周期函数--监听页面加载*/onLoad: function (options) {console.log("options:--onLoad-----------------------")console.log(options)//转发跳转处理let tpage=options.tpagelet data_key=options.data_keylet data_value=options.data_valueif(tpage){wx.navigateTo({url: '/pages/'+options.tpage+'/'+options.tpage+'?'+data_key+"="+data_value})}},//切换图片滑动swiperChange(e){console.log(e)let current = e.detail.currentthis.setData({current:current})},/*** 生命周期函数--监听页面初次渲染完成*/onReady: function () {},/*** 生命周期函数--监听页面显示*/onShow: function () {},
})

3. index.wxss

/* pages/index/index.wxss */.main{  height: 100%;width:100%;
}/*图片轮播信息*/
.swiperMain{/* width:100%; */height: 300rpx;overflow: hidden;box-sizing: border-box;margin: 0 30rpx;border-radius: 16rpx;position: relative;
}
swiper{height: 300rpx;overflow: hidden;border-radius: 16rpx;transform: translateY(0);
}
.swiperImg{width:100%;height: 300rpx;
}
.dots{position: absolute;left:0;right:0;bottom:20rpx;display: flex;justify-content: center;
}
.dots .dot{margin: 0 6rpx;width:16rpx;height: 16rpx;background: rgba(255, 255, 255, 0.5);border-radius: 50%;transition: all .6s;
}
.dots .dot.active{width:16rpx;height: 16rpx;background: rgba(255, 255, 255, 1);border-radius: 50%;transition: all .6s;
}