jQuery实现简单的图片查看器

项目中自己diy了一个图片查看器。因为初始代码不是自己的，只是在上面改了一下也没有弄的很漂亮。等以后有时间了在重写一下样式和封装，作为备用的只是积累吧。如果有童鞋有用到，完全可以在此基础上改，比较容易，代码也比较简单

图片查看器主要有几个功能：

　　1.显示图片和图片信息（图片名称、发布者等等）

　　2.切换图片

　　3.关闭图片查看器

初始化接口函数pictureViewer.init: function(picInfos,tapNumber,isBig)

rush:js;"> picInfos: 传入图片组信息，必须，格式如下 var picInfos = [ { "url" : "default.png","data": [ { "key":"名称:","value":"测试图片" },{ "key":"发布者：","value":"chua" } ] },{ "url" : "test.jpeg","data": [ { "key":"名称","value":"发大水发大水发顺风h" },{ "key":"这个图片的其他信息","value":"vsfsgsdgfds234323424" } ] },... ] //传入参数的样式

tapNumber:

要显示的图片在图片列表中的索引，必须，从0开始

isBig：

是否使用大图查看，默认是false，可选 html及css源码如下（后面有一个例子）

rush:xhtml;"> 　　<Meta charset="utf-8"> 　　

js的源码如下

rush:js;"> pictureViewer = { picInfos: [],curPicIndex: 0,isBig:false,//大图查看？默认为false。默认图片显示区域为window宽度的40%，大图为80% imgTapSelector:".imgTapDetail",init: function(picInfos,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 < 0){
_this.curPicIndex = _this.picInfos.length-1;
}
$("#tapContent").html("")
tapImg();
}).on("click","#closeTap",function(){
$(_this.imgTapSelector).hide("fast")
})
}
var offTop = top.document.body.scrollTop || top.document.documentElement.scrollTop;
$('#imgTapPanel').css("margin-top",_this.isBig?(offTop>30?offTop:30):offTop + 100)
tapImg();
$(_this.imgTapSelector).show("fast");
}
//初始化图片查看器的HTML代码
function initTapImgHtml(){
var $detailText = '

'

• '<div id="imgTapPanel" class="page-shadowContent '+(_this.isBig?"widget-big":"")+'">'
• '<div id="leftTap" class="leftTap">

'

'<div id="rightTap" class="rightTap">

'

'<div id="closeTap" class="closeTap">

'

'<div class="widget row"><div class="widget-body">'

'<div class="widget-detail row">'

'<div class="imgShow">'

'<img src="logo.png" id="tapImg" class="imgContent">'

'