记录js的一个图片预览功能代码

1.图片预览层的样式：

/* 图片预览 弹出层样式 */
html,body,div,img,button{margin:0;padding:0;box-sizing:border-box;}
img{border:0;}
#imgModule{display:none;}
.imgItem{width:220px;height:220px;cursor: pointer;}
.mask{background:#000;opacity:1;filter:alpha(opacity=80);position:absolute;left:0;top:0;width:100%;height:100%;}
.lightBoxContent{width:350px;height:350px;position:absolute;left:50%;top:50%;background:#fff;margin:-170px 0 0 -180px;}
#imgLoader{width:32px;height:32px;position:absolute;left:50%;top:50%;margin:-16px 0 0 -16px;display:none;}
#imgLight{width:350px;height:350px;-webkit-animation:change 1s;animation:change 1s;}
#imgModule .btn{width:40px;height:50px;position:absolute;top:50%;margin-top:-25px;cursor:pointer;}
.lightBoxSprite{background-image:url(../images/imgIcons.png);background-repeat:no-repeat;}
#lightBoxPrev{left:10px;background-position:2px center;}
#lightBoxNext{right:10px;background-position:-42px center;}
.closeBtn{width:35px;height:35px;background-position:-100px center;position:absolute;top:15px;right:15px;cursor:pointer;}
.lightBoxPagination{position:absolute;left:0;bottom:50px;width:100%;text-align:center;}
.lightBoxPagination span{display:inline-block;width:10px;height:10px;border:1px solid #fff;-webkit-border-radius:50%;border-radius:50%;margin-right:8px;}
.lightBoxPagination span.current{background:#fff;}
@keyframes change{
0%{opacity:0;}
100%{opacity:1;}
}

 

2.图片预览层的js文件

var LightBox = function(options){
this.imgListParent = document.getElementById(options.imgListParent); //图片列表的父元素
this.imgItemClass = options.imgItemClass; //图片的className
this.idx = 0; //图片的索引，初始值为0
this.isShowPage = options.isShowPage || false; //是否显示分页，默认不显示
this.init();
};
//初始化
LightBox.prototype.init = function(){
this.renderDOM();
this.imgListClick();
this.nextBtnClick();
this.prevBtnClick();
this.closeBtnClick();
this.keyDownEvent();
};
//渲染弹窗
LightBox.prototype.renderDOM = function(){
var imgModule = document.createElement("div");
imgModule.id = "imgModule";
var oHtml = "";
oHtml += '<div class="mask"></div>';
oHtml += '<div class="lightBox">';
oHtml += '<div class="lightBoxContent">';
oHtml += '<img src="avicit/mms/offlinedataqrcode/images/loading.gif" alt="" id="imgLoader">';
oHtml += '<img alt="" id="imgLight">';
oHtml += '</div>';
oHtml += '<span class="btn lightBoxSprite" id="lightBoxPrev"></span>';
oHtml += '<span class="btn lightBoxSprite" id="lightBoxNext"></span>';
oHtml += '<span class="closeBtn lightBoxSprite" id="closeBtn"></span>';
oHtml += '<div class="lightBoxPagination" id="lightBoxPagination"></div>';
oHtml += '</div>';

imgModule.innerHTML = oHtml;
document.body.appendChild(imgModule);
};
//分页
LightBox.prototype.pagination = function(idx){
var imgList = this.getByClass(this.imgListParent, this.imgItemClass);
var pagination = document.getElementById("lightBoxPagination");
var page = "";
for(var i = 0; i < imgList.length; i++){
if(idx == i){
page += '<span class="current"></span>';
}else{
page += '<span></span>';
}
}
if(this.isShowPage){
pagination.innerHTML = page;
}
};
//点击图片弹出弹窗
LightBox.prototype.imgListClick = function(){
var imgList = this.getByClass(this.imgListParent, this.imgItemClass);
var imgModule = document.getElementById("imgModule");
var self = this;
for(var i = 0; i < imgList.length; i++){
imgList[i].index = i;
imgList[i].onclick = function(){
imgModule.style.display = "block";
var src = this.getAttribute("src");
self.idx = this.index;
self.imgLoad(src);
self.pagination(self.idx);


}
}
//self.keyDownEvent();
};
//上一张
LightBox.prototype.prevBtnClick = function(){
var prevBtn = document.getElementById("lightBoxPrev");
var self = this;
prevBtn.onclick = function(){
var imgList = self.getByClass(self.imgListParent, self.imgItemClass);
self.idx--;
if(self.idx < 0){
self.idx = imgList.length - 1;
}
var src = imgList[self.idx].getAttribute("src");
self.imgLoad(src);
self.pagination(self.idx);
}
};
//下一张
LightBox.prototype.nextBtnClick = function(){
var nextBtn = document.getElementById("lightBoxNext");
var self = this;
nextBtn.onclick = function(){
var imgList = self.getByClass(self.imgListParent, self.imgItemClass);
self.idx++;
if(self.idx >= imgList.length){
self.idx = 0;
}
var src = imgList[self.idx].getAttribute("src");
self.imgLoad(src);
self.pagination(self.idx);
}
};
//图片预加载
LightBox.prototype.imgLoad = function(src, callback){
var imgLight = document.getElementById("imgLight");
var loader = document.getElementById("imgLoader");
loader.style.display = "block";
var img = new Image();
img.onload = function(){
loader.style.display = "none";
imgLight.src = src;
};
img.src = src;
};
//关闭弹窗
LightBox.prototype.closeBtnClick = function(){
var closeBtn = document.getElementById("closeBtn");
var imgModule = document.getElementById("imgModule");
closeBtn.onclick = function(){
imgModule.style.display = "none";
}
};
//封装获取元素函数
LightBox.prototype.getByClass = function(oParent, oClass){
var oEle = oParent.getElementsByTagName("*");
var oResult = [];
for(var i = 0; i < oEle.length; i++){
if(oEle[i].className == oClass){
oResult.push(oEle[i]);
}
}
return oResult;
};

//封装获取元素函数
LightBox.prototype.keyDownEvent = function(){
var self = this;
$(document).keydown(function(event){
if($('#imgModule').is(':visible')){
var e = event || window.event;
var k = e.keyCode || e.which;
switch(k) {
case 37:
var imgList = self.getByClass(self.imgListParent, self.imgItemClass);
self.idx--;
if(self.idx < 0){
self.idx = imgList.length - 1;
}
var src = imgList[self.idx].getAttribute("src");
self.imgLoad(src);
self.pagination(self.idx);
break;
case 39:
var imgList = self.getByClass(self.imgListParent, self.imgItemClass);
self.idx++;
if(self.idx >= imgList.length){
self.idx = 0;
}
var src = imgList[self.idx].getAttribute("src");
self.imgLoad(src);
self.pagination(self.idx);
break;
}
}
return false;
});
};
window.LightBox = LightBox;

3.在使用页面引用上面的js和样式：

在页面上初始化该组件

$(function () {

//创建图片预览对象
lightBox = new LightBox({
imgListParent: "imgDefault",//图片预览层所放置的div层的ID
imgItemClass: "imgItem", //图片img标签上的样式标识
isShowPage: true
});

});

4.页面元素使用：

<div id="imgDefault" style="overflow: auto;height: 99%;">

<img class="imgItem" style="padding:10px" src="/image/test-1.jpg"/>

<img class="imgItem" style="padding:10px" src="/image/test-2.jpg"/>

<img class="imgItem" style="padding:10px" src="/image/test-3.jpg"/>

</div>

5.这样在页面上点击上面的某个图片的时候，会弹出图片预览层，进行图片的预览