特效描述：利用JS实现 点击小图 弹出大图代码。利用JS实现点击小图弹出大图代码

代码结构

1. HTML代码

(function(){

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();

};

//渲染弹窗

LightBox.prototype.renderDOM = function(){

var imgModule = document.createElement("div");

imgModule.id = "imgModule";

var oHtml = "";

oHtml += '

oHtml += '

';

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 += '';

}else{

page += '';

}

}

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("data-src");

self.idx = this.index;

self.imgLoad(src);

self.pagination(self.idx);

}

}

};

//上一张

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("data-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("data-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";

// imgLight.src = "";

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;

};

window.LightBox = LightBox;

})();

new LightBox({

imgListParent: "imgDefault",

imgItemClass: "imgItem",

isShowPage: true

});