layui(八)——輪播圖常見用法總結

原文地址：https://www.cnblogs.com/wyy1234/p/9455848.html

　　carousel 是 layui 2.0 版本中新增的全新模塊，主要適用於跑馬燈/輪播等交互場景。它可以滿足任何類型內容的輪播式切換操作，更可以勝任 FullPage （全屏上下輪播）的需求，簡潔而不失強勁，靈活而優雅。

常見的options和方法整理如下：

    <div class="layui-carousel" id="test1" lay-filter="carofilter" style="font-size:larger">
        <div carousel-item>
            <div style=" padding: 0px; color: rgb(0, 0, 255); line-height: 1.5 !important;">>條目1</div>
            <div style=" padding: 0px; color: rgb(0, 0, 255); line-height: 1.5 !important;">>條目2</div>
            <div style=" padding: 0px; color: rgb(0, 0, 255); line-height: 1.5 !important;">>條目3</div>
            <div style=" padding: 0px; color: rgb(0, 0, 255); line-height: 1.5 !important;">>條目4</div>
            <div style=" padding: 0px; color: rgb(0, 0, 255); line-height: 1.5 !important;">>條目5</div>
        </div>
    </div>
    <!-- 條目中可以是任意內容，如：<img src=""> -->
    <script>
        layui.use('carousel', function () {
            var carousel = layui.carousel;
            //***************************建造實例
            var ins=carousel.render({
                elem: '#test1'
                , width: '500px'     //設置容器寬度
                , arrow: 'always'    //始終顯示箭頭，可選hover,none
                //,anim: 'updown'    //切換動畫方式，可選fade,default
                , full: false        //全屏
                , autoplay: true     //自動切換
                , interval: 1000     //自動切換的時間間隔
                , index: 3           //初始化時item索引,默認時0
                , indicator:'inside' //指示器位置，可選outside,none
            });

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

            //****************************重置輪播
            //var ins = carousel.render(options);
            ins.reload({arrow:'hover'});//將arror從alway變成hover
        });
    </script>

注:這是為了個人查找方便整理的文檔，並沒有總結完全，查看更多可訪問官網http://www.layui.com/doc

作者： 撈月亮的猴子

　　　　

出處： https://www.cnblogs.com/wyy1234/

　　　　

歡迎轉載，但請標明出處。如果本文對您有些許幫助，點擊一下推薦吧，Thanks♪(･ω･)ﾉ