/** @Name:layui.carousel 轮播模块 @Author:贤心 @License:MIT */ layui.define('jquery', function(exports){ "use strict"; var $ = layui.$ ,hint = layui.hint() ,device = layui.device() //外部接口 ,carousel = { config: {} //全局配置项 //设置全局项 ,set: function(options){ var that = this; that.config = $.extend({}, that.config, options); return that; } //事件监听 ,on: function(events, callback){ return layui.onevent.call(this, MOD_NAME, events, callback); } } //字符常量 ,MOD_NAME = 'carousel', ELEM = '.layui-carousel', THIS = 'layui-this', SHOW = 'layui-show', HIDE = 'layui-hide', DISABLED = 'layui-disabled' ,ELEM_ITEM = '>*[carousel-item]>*', ELEM_LEFT = 'layui-carousel-left', ELEM_RIGHT = 'layui-carousel-right', ELEM_PREV = 'layui-carousel-prev', ELEM_NEXT = 'layui-carousel-next', ELEM_ARROW = 'layui-carousel-arrow', ELEM_IND = 'layui-carousel-ind' //构造器 ,Class = function(options){ var that = this; that.config = $.extend({}, that.config, carousel.config, options); that.render(); }; //默认配置 Class.prototype.config = { width: '600px' ,height: '280px' ,full: false //是否全屏 ,arrow: 'hover' //切换箭头默认显示状态:hover/always/none ,indicator: 'inside' //指示器位置:inside/outside/none ,autoplay: true //是否自动切换 ,interval: 3000 //自动切换的时间间隔,不能低于800ms ,anim: '' //动画类型:default/updown/fade ,trigger: 'click' //指示器的触发方式:click/hover ,index: 0 //初始开始的索引 }; //轮播渲染 Class.prototype.render = function(){ var that = this ,options = that.config; options.elem = $(options.elem); if(!options.elem[0]) return; that.elemItem = options.elem.find(ELEM_ITEM); if(options.index < 0) options.index = 0; if(options.index >= that.elemItem.length) options.index = that.elemItem.length - 1; if(options.interval < 800) options.interval = 800; //是否全屏模式 if(options.full){ options.elem.css({ position: 'fixed' ,width: '100%' ,height: '100%' ,zIndex: 9999 }); } else { options.elem.css({ width: options.width ,height: options.height }); } options.elem.attr('lay-anim', options.anim); //初始焦点状态 that.elemItem.eq(options.index).addClass(THIS); //指示器等动作 if(that.elemItem.length <= 1) return; that.indicator(); that.arrow(); that.autoplay(); that.events(); }; //重置轮播 Class.prototype.reload = function(options){ var that = this; clearInterval(that.timer); that.config = $.extend({}, that.config, options); that.render(); }; //获取上一个等待条目的索引 Class.prototype.prevIndex = function(){ var that = this ,options = that.config; var prevIndex = options.index - 1; if(prevIndex < 0){ prevIndex = that.elemItem.length - 1; } return prevIndex; }; //获取下一个等待条目的索引 Class.prototype.nextIndex = function(){ var that = this ,options = that.config; var nextIndex = options.index + 1; if(nextIndex >= that.elemItem.length){ nextIndex = 0; } return nextIndex; }; //索引递增 Class.prototype.addIndex = function(num){ var that = this ,options = that.config; num = num || 1; options.index = options.index + num; //index不能超过轮播总数量 if(options.index >= that.elemItem.length){ options.index = 0; } }; //索引递减 Class.prototype.subIndex = function(num){ var that = this ,options = that.config; num = num || 1; options.index = options.index - num; //index不能超过轮播总数量 if(options.index < 0){ options.index = that.elemItem.length - 1; } }; //自动轮播 Class.prototype.autoplay = function(){ var that = this ,options = that.config; if(!options.autoplay) return; that.timer = setInterval(function(){ that.slide(); }, options.interval); }; //箭头 Class.prototype.arrow = function(){ var that = this ,options = that.config; //模板 var tplArrow = $([ '' ,'' ].join('')); //预设基础属性 options.elem.attr('lay-arrow', options.arrow); //避免重复插入 if(options.elem.find('.'+ELEM_ARROW)[0]){ options.elem.find('.'+ELEM_ARROW).remove(); }; options.elem.append(tplArrow); //事件 tplArrow.on('click', function(){ var othis = $(this) ,type = othis.attr('lay-type') that.slide(type); }); }; //指示器 Class.prototype.indicator = function(){ var that = this ,options = that.config; //模板 var tplInd = that.elemInd = $(['