如何使用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實現輪播圖”這篇文章對大家有幫助，同時也希望大家多多支持億速云，關注億速云行業資訊頻道，更多相關知識等著你來學習!