<del id="kmqwi"><b id="kmqwi"></b></del>
      <track id="kmqwi"><del id="kmqwi"></del></track>
    1. <table id="kmqwi"></table>
      <acronym id="kmqwi"><strong id="kmqwi"></strong></acronym>
    2. 
      
      <p id="kmqwi"><strong id="kmqwi"></strong></p>
    3. 通用輪播組件文檔 - 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 - 用心與你溝通

      亚洲图色