text/web/lay/modules/carousel.js

/** layui-v2.5.6 MIT License By https://www.layui.com */
;layui.define("jquery",function(e){"use strict";
    // 引入 layui 的 $（jQuery）模块
    var i=layui.$,
        // 初始化配置对象
        n=(layui.hint(),layui.device(),{config:{},set:function(e){
                var n=this;
                // 设置配置
                return n.config=i.extend({},n.config,e),n},
            on:function(e,i){
                return layui.onevent.call(this,t,e,i)}}),

        // 定义常量
        t="carousel",  // 轮播图的名称
        a="layui-this",  // 当前活动的元素
        l=">*[carousel-item]>*",  // 选择轮播图的每一个项目
        o="layui-carousel-left",  // 左箭头
        r="layui-carousel-right",  // 右箭头
        d="layui-carousel-prev",  // 上一项按钮
        s="layui-carousel-next",  // 下一项按钮
        u="layui-carousel-arrow",  // 箭头
        c="layui-carousel-ind",  // 指示器（小圆点）

        // 定义轮播图的核心功能
        m=function(e){
            var t=this;
            t.config=i.extend({},t.config,n.config,e),t.render()
        };

    // 轮播图的默认配置
    m.prototype.config={
        width:"600px",  // 默认宽度
        height:"280px",  // 默认高度
        full:!1,  // 是否全屏
        arrow:"hover",  // 箭头显示方式：hover即鼠标悬浮时显示
        indicator:"inside",  // 指示器的位置：inside表示在轮播图内
        autoplay:!0,  // 是否自动播放
        interval:3e3,  // 自动播放的间隔时间，单位是毫秒
        anim:"",  // 动画效果
        trigger:"click",  // 触发方式：点击
        index:0  // 默认显示第0项
    },

        // 渲染轮播图
        m.prototype.render=function(){
            var e=this,n=e.config;
            n.elem=i(n.elem),
            n.elem[0]&&(e.elemItem=n.elem.find(l),n.index<0&&(n.index=0),n.index>=e.elemItem.length&&(n.index=e.elemItem.length-1),n.interval<800&&(n.interval=800),n.full?n.elem.css({position:"fixed",width:"100%",height:"100%",zIndex:9999}):n.elem.css({width:n.width,height:n.height}),n.elem.attr("lay-anim",n.anim),e.elemItem.eq(n.index).addClass(a),e.elemItem.length<=1||(e.indicator(),e.arrow(),e.autoplay(),e.events()))
        },

        // 重新加载轮播图
        m.prototype.reload=function(e){
            var n=this;
            clearInterval(n.timer),
                n.config=i.extend({},n.config,e),
                n.render()
        },

        // 获取上一项的索引
        m.prototype.prevIndex=function(){
            var e=this,i=e.config,n=i.index-1;
            return n<0&&(n=e.elemItem.length-1),n
        },

        // 获取下一项的索引
        m.prototype.nextIndex=function(){
            var e=this,i=e.config,n=i.index+1;
            return n>=e.elemItem.length&&(n=0),n
        },

        // 增加索引
        m.prototype.addIndex=function(e){
            var i=this,n=i.config;
            e=e||1,n.index=n.index+e,n.index>=i.elemItem.length&&(n.index=0)
        },

        // 减少索引
        m.prototype.subIndex=function(e){
            var i=this,n=i.config;
            e=e||1,n.index=n.index-e,n.index<0&&(n.index=i.elemItem.length-1)
        },

        // 自动播放
        m.prototype.autoplay=function(){
            var e=this,i=e.config;
            i.autoplay&&(clearInterval(e.timer),e.timer=setInterval(function(){
                e.slide()
            },i.interval))
        },

        // 箭头按钮
        m.prototype.arrow=function(){
            var e=this,n=e.config,t=i(['<button class="layui-icon '+u+'" lay-type="sub">'+("updown"===n.anim?"&#xe619;":"&#xe603;")+"</button>",
                '<button class="layui-icon '+u+'" lay-type="add">'+("updown"===n.anim?"&#xe61a;":"&#xe602;")+"</button>"].join(""));

            // 设置箭头的显示方式
            n.elem.attr("lay-arrow",n.arrow),
            n.elem.find("."+u)[0]&&n.elem.find("."+u).remove(),
                n.elem.append(t),
                t.on("click",function(){
                    var n=i(this),t=n.attr("lay-type");
                    e.slide(t)
                })
        },

        // 指示器
        m.prototype.indicator=function(){
            var e=this,n=e.config,t=e.elemInd=i(['<div class="'+c+'"><ul>',function(){
                var i=[];
                return layui.each(e.elemItem,function(e){
                    i.push("<li"+(n.index===e?' class="layui-this"':"")+"></li>")
                }),i.join("")
            }(),"</ul></div>"].join(""));

            // 设置指示器的显示方式
            n.elem.attr("lay-indicator",n.indicator),
            n.elem.find("."+c)[0]&&n.elem.find("."+c).remove(),
                n.elem.append(t),"updown"===n.anim&&t.css("margin-top",-(t.height()/2)),
                t.find("li").on("hover"===n.trigger?"mouseover":n.trigger,function(){
                    var t=i(this),a=t.index();
                    a>n.index?e.slide("add",a-n.index):a<n.index&&e.slide("sub",n.index-a)
                })
        },

        // 切换轮播图
        m.prototype.slide=function(e,i){
            var n=this,l=n.elemItem,u=n.config,c=u.index,m=u.elem.attr("lay-filter");
            n.haveSlide||("sub"===e?(n.subIndex(i),l.eq(u.index).addClass(d),setTimeout(function(){
                l.eq(c).addClass(r),l.eq(u.index).addClass(r)
            },50)):(n.addIndex(i),l.eq(u.index).addClass(s),setTimeout(function(){
                l.eq(c).addClass(o),l.eq(u.index).addClass(o)
            },50)),setTimeout(function(){
                l.removeClass(a+" "+d+" "+s+" "+o+" "+r),l.eq(u.index).addClass(a),
                    n.haveSlide=!1
            },300),n.elemInd.find("li").eq(u.index).addClass(a).siblings().removeClass(a),
                n.haveSlide=!0,layui.event.call(this,t,"change("+m+")",{index:u.index,prevIndex:c,item:l.eq(u.index)}))
        },

        // 事件绑定
        m.prototype.events=function(){
            var e=this,i=e.config;
            i.elem.data("haveEvents")||(i.elem.on("mouseenter",function(){
                clearInterval(e.timer)
            }).on("mouseleave",function(){
                e.autoplay()
            }),i.elem.data("haveEvents",!0))
        },

        // 初始化轮播图
        n.render=function(e){
            var i=new m(e);
            return i
        },

        // 触发layui事件
        e(t,n)
});