概念：
微信小程序幻灯片效果一般是通过使用swiper组件来实现的。Swiper是一个移动端的网页滑动组件，可以用于实现轮播图、图片展示等效果。
在小程序中，可以在页面的wxml文件中添加swiper标签，并在对应的js文件中进行配置。通常需要设置swiper-item的数量、轮播间隔、滑动方向等参数，还可以自定义每个swiper-item中的内容和样式。
可以通过设置autoplay、interval等属性来实现幻灯片自动轮播的效果。还可以使用indicator-dots属性添加轮播指示点，通过修改指示点的样式来实现不同的幻灯片效果。同时，可以在swiper组件上添加touchstart、touchmove等事件，实现手动滑动的效果。
index.wxml
<view class="container">
<!-- 幻灯片 start -->
<view class="banner">
<swiper indicator-dots="{
{indicator_dots}}" indicator-color="{
{indicator_color}}" indicator-active-color="{
{indicator_active_color}}" autoplay="{
{autoplay}}" interval="{
{interval}}" circular="{
{circular}}">
<swiper-item>
<image src="../../images/banner-1.png" mode="widthFix" class="img"></image>
</swiper-item>
<swiper-item>
<image src="../../images/banner-2.png" mode="widthFix" class="img"></image>
</swiper-item>
<swiper-item>
<image src="../../images/banner-3.png" mode="widthFix" class="img"></image>
</swiper-item>
</swiper>
</view>
<!-- 幻灯片 end -->
</view>
index.wxss
/* 图片宽度设置 */
.img{
width: 100%;
}
/* 设置三个小点的位置 */
.banner swiper{
width: 100%;
height: 230rpx;
}
index.js
//获取应用实例
const app = getApp()
Page({
data: {
indicator_dots:true,
indicator_color: "#ffffff",
indicator_active_color:"#F8626E",
autoplay: true,
interval: 3000,
circular: true
},
onLoad: function () {
}
})
方法二：（通过for循环遍历将接口数据渲染到模板显示）
index.wxml
<!-- 幻灯片 start -->
<view class="banner">
<swiper indicator-dots="{
{indicator_dots}}" indicator-color="{
{indicator_color}}" indicator-active-color="{
{indicator_active_color}}" autoplay="{
{autoplay}}" interval="{
{interval}}" circular="{
{circular}}">
<block wx:for="{
{imgUrls}}" wx:key="item" wx:for-index="index">
<swiper-item>
<image src="{
{item.imgsrc}}" mode="widthFix" class="img" />
</swiper-item>
</block>
</swiper>
</view>
<!-- 幻灯片 end -->
index.js
data: {
indicator_dots:true,
indicator_color: "#ffffff",
indicator_active_color:"#F8626E",
autoplay: true,
interval: 3000,
circular: true,
imgUrls:[],
},
onLoad: function () {
var that = this;
//首页广告图
wx.request({
url: 'http://www.wyt.plus/index.php/api/adv/index',
header: {
'content-type': 'application/json' // 默认值
},
success(res) {
that.setData({
imgUrls: res.data.data
});
},
complete() {
wx.hideLoading();
}
});
}
表结构
CREATE TABLE `yzm_adv` (
`id` int(10) unsigned NOT NULL AUTO_INCREMENT COMMENT '编号',
`title` varchar(200) NOT NULL DEFAULT '' COMMENT '广告标题',
`urls` varchar(200) NOT NULL DEFAULT '' COMMENT '广告url',
`imgsrc` varchar(200) NOT NULL DEFAULT '' COMMENT '广告图',
`add_time` int(11) NOT NULL DEFAULT '0' COMMENT '添加时间',
`upd_time` int(11) NOT NULL DEFAULT '0' COMMENT '更新时间',
`is_show` tinyint(4) NOT NULL DEFAULT '1' COMMENT '是否显示，1显示 0 不显示',
PRIMARY KEY (`id`)
) ENGINE=InnoDB AUTO_INCREMENT=9 DEFAULT CHARSET=utf8;
接口调取代码
public function index()
{
$where = [
'is_show'=>1
];
$res= $this->advs->getAll($where);
foreach($res as $k=>$v){
$res[$k]['imgsrc'] = base_url().$v['imgsrc'];
}
$data = [
'code' => 200,
'data' => $res
];
echo json_encode($data);
}