效果图:
css样式:
<style>
html,body,div,img,button{margin:0;padding:0;box-sizing:border-box;}
img{border:0;}
li{list-style:none;}
#imgModule{display:none;}
#imgDefault{cursor:pointer;}
.imgItem{width:100px;height:80px;}
.mask{background:#000;opacity:.8;filter:alpha(opacity=80);position:absolute;left:0;top:0;width:100%;height:100%;}
.lightBoxContent{width:800px;height:530px;position:absolute;left:50%;top:50%;background:#fff;margin:-265px 0 0 -400px;}
#imgLoader{width:32px;height:32px;position:absolute;left:50%;top:50%;margin:-16px 0 0 -16px;display:none;}
#imgLight{width:800px;height:530px;-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;}
}
</style>
html代码:
<div id="imgDefault">
<img class="imgItem" data-src="images/1.jpg" src="images/1.jpg">
<img class="imgItem" data-src="images/2.jpg" src="images/2.jpg">
<img class="imgItem" data-src="images/3.jpg" src="images/3.jpg">
<img class="imgItem" data-src="images/4.jpg" src="images/4.jpg">
</div>
js脚本:
(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 += '<div class="mask"></div>';
oHtml += '<div class="lightBox">';
oHtml += '<div class="lightBoxContent">';
oHtml += '<img src="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("data-src");
self.idx = this.index;
self.imgLoad(src);
self.pagination(self.idx);
$("html,body").css({
height:'100%',
overflow:'hidden'
})
}
}
};
//上一张
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";
$("html,body").css({
height:'auto',
overflow:'visible'
})
}
};
//封装获取元素函数
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
});
注意:弹框中的左右箭头、关闭按钮是CSS精灵图,通过定位获取。在实际项目中可以根据实际修改样式和图片。还有一个loading图片,在等待加载时显示。