通用輪播組件文檔 - layui.carousel

                    carousel 是 layui 2.0 版本中新增的全新模塊,主要適用于跑馬燈/輪播等交互場景。它并非單純地為焦點圖而生,準確地說,它可以滿足任何類型內容的輪播式切換操作,更可以勝任 FullPage (全屏上下輪播)的需求,簡潔而不失強勁,靈活而優雅。

                    模塊加載名稱:carousel

                    快速使用

                    如下是幾個常用的輪播示例,其中背景色是為了區分條目單獨加的,在layui框架中并不會包含。條目區域可以放上文字列表、圖片等任意內容

                    <!DOCTYPE html>
                    <html>
                    <head>
                      <meta charset="utf-8">
                      <title>carousel模塊快速使用</title>
                      <link rel="stylesheet" href="/static/build/layui.css" media="all">
                    </head>
                    <body>
                     
                    <div class="layui-carousel" id="test1">
                      <div carousel-item>
                        <div>條目1</div>
                        <div>條目2</div>
                        <div>條目3</div>
                        <div>條目4</div>
                        <div>條目5</div>
                      </div>
                    </div>
                    <!-- 條目中可以是任意內容,如:<img src=""> -->
                     
                    <script src="/static/build/layui.js"></script>
                    <script>
                    layui.use('carousel', function(){
                      var carousel = layui.carousel;
                      //建造實例
                      carousel.render({
                        elem: '#test1'
                        ,width: '100%' //設置容器寬度
                        ,arrow: 'always' //始終顯示箭頭
                        //,anim: 'updown' //切換動畫方式
                      });
                    });
                    </script>
                    </body>
                    </html>

                    在HTML結構中,只需要簡單地注意這兩項:
                    1) 外層元素的 class="layui-carousel" 用來標識為一個輪播容器
                    2) 內層元素的屬性 carousel-item 用來標識條目

                    id 則用于carousel模塊建造實例的元素指向,剩下的工作,就是按照你的實際需求,給方法設置不同的基礎參數了。

                    基礎參數選項

                    通過核心方法:carousel.render(options) 來對輪播設置基礎參數,也可以通過方法:carousel.set(options) 來設定全局基礎參數.

                    可選項 說明 類型 默認值
                    elem 指向容器選擇器,如:elem: '#id'。也可以是DOM對象 string/object
                    width 設定輪播容器寬度,支持像素和百分比 string '600px'
                    height 設定輪播容器高度,支持像素和百分比 string '280px'
                    full 是否全屏輪播 boolean false
                    anim 輪播切換動畫方式,可選值為:
                    • default(左右切換)
                    • updown(上下切換)
                    • fade(漸隱漸顯切換)
                    string 'default'
                    autoplay 是否自動切換 boolean true
                    interval 自動切換的時間間隔,單位:ms(毫秒),不能低于800 number 3000
                    index 初始開始的條目索引 number 0
                    arrow 切換箭頭默認顯示狀態,可選值為:
                    • hover(懸停顯示)
                    • always(始終顯示)
                    • none(始終不顯示)
                    string 'hover'
                    indicator 指示器位置,可選值為:
                    • inside(容器內部)
                    • outside(容器外部)
                    • none(不顯示)

                    注意:如果設定了 anim:'updown',該參數將無效
                    string 'inside'
                    trigger 指示器的觸發事件 string 'click'
                    切換事件

                    輪播的每一次切換時觸發,回調函數返回一個object參數,攜帶的成員如下:

                    var carousel = layui.carousel;
                     
                    //監聽輪播切換事件
                    carousel.on('change(test1)', function(obj){ //test1來源于對應HTML容器的 lay-filter="test1" 屬性值
                      console.log(obj.index); //當前條目的索引
                      console.log(obj.prevIndex); //上一個條目的索引
                      console.log(obj.item); //當前條目的元素對象
                    });     
                          
                    重置輪播

                    事實上,在執行 carousel.render(options) 方法時,有返回一個當前實例的對象。該對象包含了用于操作當前輪播的一些屬性和方法。

                    var ins = carousel.render(options);
                     
                    //重置輪播
                    ins.reload(options);
                          
                    結語

                    由于輪播的使用非常簡單,所以本篇不做過于詳細的講解,核心在于基礎參數選項的設置。你也可以前往示例頁面進行更為直觀的了解。

                    layui - 用心與你溝通

                    亚洲图色