项目中自己diy了一个图片查看器。因为初始代码不是自己的，只是在上面改了一下也没有弄的很漂亮。等以后有时间了在重写一下样式和封装，作为备用的只是积累吧。如果有童鞋有用到，完全可以在此基础上改，比较容易，代码也比较简单
图片查看器主要有几个功能：
1.显示图片和图片信息（图片名称、发布者等等）
2.切换图片
3.关闭图片查看器
初始化接口函数pictureviewer.init: function(picinfos,tapnumber,isbig)
picinfos: 传入图片组信息，必须，格式如下
var picinfos = [ { url : default.png, data: [ { key:名称:, value:测试图片 }, { key:发布者：, value:chua } ] }, { url : test.jpeg, data: [ { key:名称, value:测试图片 }, { key:发布者：, value:发大水发大水发顺风h }, { key:这个图片的其他信息, value:vsfsgsdgfds234323424 } ] }, ... ] //传入参数的样式
tapnumber: 要显示的图片在图片列表中的索引，必须，从0开始
isbig：是否使用大图查看，默认是false，可选
html及css源码如下（后面有一个例子）

js的源码如下
pictureviewer = { picinfos: [], curpicindex: 0, isbig:false,//大图查看？默认为false。默认图片显示区域为window宽度的40%，大图为80% imgtapselector:.imgtapdetail, init: function(picinfos,tapnumber,isbig){ var _this = this; _this.picinfos = picinfos; _this.curpicindex = tapnumber; _this.isbig = isbig; tapimginit(); //图片查看器初始化 function tapimginit(){ //页面代码和事件只需要初始化一次即可 if(!_this.guid){ _this.guid = 1; inittapimghtml(); $(document).on(click,#righttap,function(){ _this.curpicindex++; if(_this.curpicindex == _this.picinfos.length){ _this.curpicindex = 0; } $(#tapcontent).html() tapimg() }).on(click,#lefttap,function(){ _this.curpicindex--; if(_this.curpicindex 30?offtop:30):offtop + 100) tapimg(); $(_this.imgtapselector).show(fast); } //初始化图片查看器的html代码 function inittapimghtml(){ var $detailtext = '' + '' + '
' + '
' + '
' + '' + '' + '' + '' + '
' + '
' + '
'; $(_this.imgtapselector).html($detailtext); hoverbutton(#lefttap, 0, 0, 0, -80px); hoverbutton(#righttap, -80px, 0, -80px, -80px); hoverbutton(#closetap, 0, -165px, -60px, -165px); } //添加左右切换图标、关闭图标的hover响应事件。这个其实可以起到css中更好一些 function hoverbutton(id, x, y, a, b){ $(id).hover(function(){ $(this).css('background-position', a + ' '+ b) },function(){ $(this).css('background-position', x + ' '+ y) }) } //刷新当前图片及图片信息 function tapimg(){ var reg = /[:：]$/, lefttap = $(#lefttap), righttap = $(#righttap), imgtap = $(#tapimg), contenttap = $(#tapcontent); lefttap.css(display,block); righttap.css(display,block); if(_this.picinfos.length == 1){ lefttap.css(display,none); righttap.css(display,none); } imgtap.attr(src,_this.picinfos[_this.curpicindex].url); var data = _this.picinfos[_this.curpicindex].data, datalength = data.length, $text = ; for(var i=0; i 400){ imgtap.parent().attr(style,height:inherit); }else{ imgtap.parent().removeattr(style); } },1); } }}
css中用到的切图imgtap.png为下面的图片
测试例子pictureviewer.init(picinfos,0,true);的效果图如下
测试例子pictureviewer.init(picinfos,0,false);的效果图如下
这是一个比较粗糙的图片查看器，改起来也比较方便。后期如果有时间本人重写一下。
如果觉得本文不错，请点击右下方【推荐】！