版权声明:本文为博主原创文章,未经博主允许不得转载,如果你非要转载,那能怎么办呢? https://blog.csdn.net/ghjzzhg/article/details/80626198
图片设置上一页、下一页、切换、预加载等功能:
//相册层 layer.photos = function(options, loop, key){ var dict = {}; options = options || {}; if(!options.photos) return; var type = options.json || options.photos.constructor === Object; var photos = type ? options.photos : {}, data = photos.data || []; var start = photos.start || 0; dict.imgIndex = (start|0) + 1; options.img = options.img || 'img'; var success = options.success; delete options.success; if(!type){ //页面直接获取 var parent = $(options.photos), pushData = function(){ data = []; parent.find(options.img).each(function(index){ var othis = $(this); othis.attr('layer-index', index); data.push({ alt: othis.attr('alt'), pid: othis.attr('layer-pid'), src: othis.attr('layer-src') || othis.attr('src'), thumb: othis.attr('src') }); }) }; pushData(); if (data.length === 0) return; loop || parent.off("click").on('click', options.img, function(){ var othis = $(this), index = othis.attr('layer-index'); layer.photos($.extend(options, { photos: { start: index, data: data, tab: options.tab }, full: options.full }), true); pushData(); }) //不直接弹出 if(!loop) return; } else if (data.length === 0){ return layer.msg('没有图片'); } //上一张 dict.imgprev = function(key){ dict.imgIndex--; if(dict.imgIndex < 1){ dict.imgIndex = data.length; } dict.tabimg(key); }; //下一张 dict.imgnext = function(key,errorMsg){ dict.imgIndex++; if(dict.imgIndex > data.length){ dict.imgIndex = 1; if (errorMsg) {return}; } dict.tabimg(key) }; //方向键 dict.keyup = function(event){ if(!dict.end){ var code = event.keyCode; event.preventDefault(); if(code === 37){ dict.imgprev(true); } else if(code === 39) { dict.imgnext(true); } else if(code === 27) { layer.close(dict.index); } } } //切换 dict.tabimg = function(key){ if(data.length <= 1) return; photos.start = dict.imgIndex - 1; layer.close(dict.index); return layer.photos(options, true, key); setTimeout(function(){ layer.photos(options, true, key); }, 200); } //一些动作 dict.event = function(){ dict.bigimg.hover(function(){ dict.imgsee.show(); }, function(){ dict.imgsee.hide(); }); dict.bigimg.find('.layui-layer-imgprev').on('click', function(event){ event.preventDefault(); dict.imgprev(); }); dict.bigimg.find('.layui-layer-imgnext').on('click', function(event){ event.preventDefault(); dict.imgnext(); }); $(document).on('keyup', dict.keyup); }; //图片预加载 function loadImage(url, callback, error) { var img = new Image(); img.src = url; if(img.complete){ return callback(img); } img.onload = function(){ img.onload = null; callback(img); }; img.onerror = function(e){ img.onerror = null; error(e); }; }; dict.loadi = layer.load(1, { shade: 'shade' in options ? false : 0.9, scrollbar: false }); loadImage(data[start].src, function(img){ layer.close(dict.loadi); dict.index = layer.open($.extend({ type: 1, id: 'layui-layer-photos', area: function(){ var imgarea = [img.width, img.height]; var winarea = [$(window).width() - 100, $(window).height() - 100]; //如果 实际图片的宽或者高比 屏幕大(那么进行缩放) if(!options.full && (imgarea[0]>winarea[0]||imgarea[1]>winarea[1])){ var wh = [imgarea[0]/winarea[0],imgarea[1]/winarea[1]];//取宽度缩放比例、高度缩放比例 if(wh[0] > wh[1]){//取缩放比例最大的进行缩放 imgarea[0] = imgarea[0]/wh[0]; imgarea[1] = imgarea[1]/wh[0]; } else if(wh[0] < wh[1]){ imgarea[0] = imgarea[0]/wh[1]; imgarea[1] = imgarea[1]/wh[1]; } } return [imgarea[0]+'px', imgarea[1]+'px']; }(), title: false, shade: 0.9, shadeClose: true, closeBtn: false, move: '.layui-layer-phimg img', moveType: 1, scrollbar: false, moveOut: true, //anim: Math.random()*5|0, isOutAnim: false, skin: 'layui-layer-photos' + skin('photos'), content: '<div class="layui-layer-phimg">' +'<img src="'+ data[start].src +'" alt="'+ (data[start].alt||'') +'" layer-pid="'+ data[start].pid +'">' +'<div class="layui-layer-imgsee">' +(data.length > 1 ? '<span class="layui-layer-imguide"><a href="javascript:;" class="layui-layer-iconext layui-layer-imgprev"></a><a href="javascript:;" class="layui-layer-iconext layui-layer-imgnext"></a></span>' : '') +'<div class="layui-layer-imgbar" style="display:'+ (key ? 'block' : '') +'"><span class="layui-layer-imgtit"><a href="javascript:;">'+ (data[start].alt||'') +'</a><em>'+ dict.imgIndex +'/'+ data.length +'</em></span></div>' +'</div>' +'</div>', success: function(layero, index){ dict.bigimg = layero.find('.layui-layer-phimg'); dict.imgsee = layero.find('.layui-layer-imguide,.layui-layer-imgbar'); dict.event(layero); options.tab && options.tab(data[start], layero); typeof success === 'function' && success(layero); }, end: function(){ dict.end = true; $(document).off('keyup', dict.keyup); } }, options)); }, function(){ layer.close(dict.loadi); layer.msg('当前图片地址异常<br>是否继续查看下一张?', { time: 30000, btn: ['下一张', '不看了'], yes: function(){ data.length > 1 && dict.imgnext(true,true); } }); }); };