layer轮播的使用

轮播在很多页面上都需要，比如产品轮播，新闻轮播。

不想自己写，可以使用别人的组件。 下面是layer轮播的使用

 

一、引用layer的js和css，可以去官网下载。

<link href="~/Content/layui-v2.5.4/layui/css/layui.css" rel="stylesheet" />

<script src="~/Content/layui-v2.5.4/layui/layui.js"></script>

二，html元素

<div class="layui-carousel" id="test1">
  <div carousel-item>

    <div>条目1</div>     //需要轮播的条目，可以放img  span任何东西
    <div>条目2</div>
    <div>条目3</div>
    <div>条目4</div>
    <div>条目5</div>

  </div>
</div>

三.脚本，创建轮播

 layui.use('carousel', function () {
        var carousel = layui.carousel;
        //***************************建造实例
        var ins = carousel.render({
            elem: '#test1'
            , width: '100%'     //设置容器宽度
            , arrow: 'always'    //始终显示箭头，可选hover,none
            //,anim: 'updown'    //切换动画方式，可选fade,default
            , full: false        //全屏
            , autoplay: true     //自动切换
            , interval: 4000     //自动切换的时间间隔
            , index: 0           //初始化时item索引,默认时0
            , indicator: 'inside' //指示器位置，可选outside,none
            , anim : "fade"
        });

        //**************************监听轮播切换事件
        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
    });