如何使用JavaScript实现轮播图

这篇文章主要介绍了如何使用JavaScript实现轮播图，具有一定借鉴价值，感兴趣的朋友可以参考下，希望大家阅读完这篇文章之后大有收获，下面让小编带着大家一起了解一下。

wxml（使用官方的等等组件来展示）：

展示轮播图的wxml、wxss代码

<!--轮播图-->

<swiper class="banner" indicator-dots autoplay indicator-active-color="#fbbd08" circular>

      <block wx:for="{{banner}}" wx:key="index">

            <swiper-item>

                  <image lazy-load src="{{item.img}}" class="banner_image" />

            </swiper-item>

      </block>

</swiper>

我们通过使用wx:for循环，把js文件里面的banner数组遍历出来即可。

wxss(定义轮播图样式，比如宽、高)：

.banner {

  width: 100%;

  display: flex;

  box-sizing: border-box;

  height: 350rpx;

}

.banner_image {

  width: 100%;

  display: flex;

  box-sizing: border-box;

  height: 500rpx;

}

获取轮播图的JavaScript代码

/**

 * 页面的初始数据

 */

data: {

  banner:[],

  num:'',

  steps:[],

},

/**

 * 生命周期函数--监听页面加载

 */

onLoad: function (options) {

     //一进入页面就获取轮播图数据

     //定义一个获取轮播图的get_banner函数

     this.get_banner()

},

  //获取轮播图

  get_banner(){

    //这个this指向的是Page()方法里面的整个对象，形如Page({this})

    //赋值给that，that也指向了同样的对象

    let that = this  

    db.collection('banner').get({

      success:function(res){

         //获取成功

         //通过setData()方法赋值给data里面的banner数组

         console.log(res)

         that.setData({

            banner:res.data

         })

      },

      fail(er){

         console.log('获取失败，所以执行fail函数了，也就是打印了我这句话')

      }

    })

},

感谢你能够认真阅读完这篇文章，希望小编分享的“如何使用JavaScript实现轮播图”这篇文章对大家有帮助，同时也希望大家多多支持亿速云，关注亿速云行业资讯频道，更多相关知识等着你来学习!