脚本宝典收集整理的这篇文章主要介绍了javascript代码实例教程-原生javascript-图片弹窗交互，脚本宝典觉得挺不错的，现在分享给大家，也给大家做个参考。
现在分享，自己实现的一些小心得：
如何获取元素正确的索引，即点击第N张图片，获取N值
for(var n=0;n<this.sLen;n++){ this.oImg[n].index = n;
this.oImg[n].onclick = function(){ alert(this.index); //就能正确返回索引值了
}
}
详细代码javascript：
function LGY_photoBox(option){
this.oImg = this.getId(option.wrapID).getElementsByTagName('img');
this.sLen = this.oImg.length; //总个数
this.aImg_src = []; //大图数据数组
this.aImg_title = []; //标题数据数组
this.sIndex = 0; //索引
this.nImgWidth = 0;
this.nImgHeight = 0;
this.timer = null;
this.sDelay = 0.25;
this.int();
}
LGY_photoBox.prototype = {
getId:function(id){
return document.getElementById(id);
},
createBoxDom:function(t,src){
var html = document.createElement('p');
html.id = 'gy_photoBox';
document.body.appendChild(html);
html.innerHTML ='<p id="gy_photoBox_prev"></p>'+
'<p id="gy_photoBox_next"></p>'+
'<p id="gy_photoBox_head">'+
'<span id="gy_photoBox_close">关闭</span>'+
'<span id="gy_photoBox_num">'+
'<strong id="gy_photoBox_index"></strong>'+
'/'+this.sLen+
'</span>'+
'<p id="gy_photoBox_title"></p>'+
'</p>'+
'<p id="gy_photoBox_main">'+
'<img id="gy_photoBox_img" />'+
'</p>';
//事件处理
var _that = this;
this.getId('gy_photoBox_close').onclick = function(){
_that.removeBox();
}
// this.btnIsShow();
this.btnPrev();
this.btnNext();
this.btnIsShow();
},
setBoxCss:function(){
var sScrollTop = document.body.scrollTop || document.documentElement.scrollTop;
var sWindow_h = document.documentElement.clientHeight;
var t_h = parseInt(this.getCss(this.getId('gy_photoBox_head'),'height')),
hold_h = sWindow_h - t_h - 20;
var width = this.nImgWidth ,
height = this.nImgHeight;
if(this.nImgHeight>hold_h){
height = hold_h,
width = this.nImgWidth*(height/this.nImgHeight);
}
// alert('图片高度：'+height+'window可见高度：'+sWindow_h+'头部高度：'+t_h);
//左右距离
var ml = width/2,
t = ( sWindow_h-t_h-height )/2;
//设置盒子样式
this.setCss(this.getId('gy_photoBox_head'),{'top':sScrollTop+'px'});
this.setCss(this.getId('gy_photoBox_main'),{
'margin-left':-ml+'px',
'top':sScrollTop+t+t_h+'px',
'width':width+'px',
'height':height+'px'
});
//按钮
var btn_h = parseInt(this.getCss(this.getId('gy_photoBox_prev'),'height')),
btn_top = ( sWindow_h-t_h-btn_h )/2;
this.setCss(this.getId('gy_photoBox_prev'),{'top':sScrollTop+btn_top+'px'});
this.setCss(this.getId('gy_photoBox_next'),{'top':sScrollTop+btn_top+'px'});
},
removeBox:function(){
document.body.removeChild(this.getId('gy_photoBox'));
document.body.removeChild(this.getId('gy_photoBox_cover'));
document.body.removeChild(this.getId('gy_photoBox_tips'));
this.setCss(document.documentElement,{'height':'auto','overflow-y':'auto','_overflow-y':'scroll'});
},
getData:function(){
for(var n=0;n<this.sLen;n++){
var src = this.oImg[n].getAttribute('b-src'),
title = this.oImg[n].getAttribute('alt');
this.aImg_src.push(src);
this.aImg_title.push(title);
}
},
cover:function(){
var html = document.createElement('p');
html.id = 'gy_photoBox_cover';
document.body.appendChild(html);
this.setCoverCss();
},
setCoverCss:function(){
var st = document.body.scrollTop || document.documentElement.scrollTop;
this.setCss(this.getId('gy_photoBox_cover'),{'height':st+document.documentElement.clientHeight+'px'});
},
waitDo:function(){
var html = document.createElement('p');
html.id = 'gy_photoBox_tips';
document.body.appendChild(html);
html.innerHTML = '图片加载中.....';
this.setTipsCss();
},
setTipsCss:function(){
var sScrollTop = document.body.scrollTop || document.documentElement.scrollTop;
var sWindow_h = document.documentElement.clientHeight;
var tips_h = parseInt(this.getCss(this.getId('gy_photoBox_tips'),'height')),
tips_top = (sWindow_h-tips_h)/2;
this.setCss(this.getId('gy_photoBox_tips'),{'top':sScrollTop+tips_top+'px'});
},
getCss:function(node,value)
{
return node.currentStyle?node.currentStyle[value]:getComputedStyle(node,null)[value];
},
setCss:function(node,val){
for(var v in val){
node.style.cssText += ';'+ v +':'+val[v];
}
},
btnIsShow:function(){
if(this.sLen == 1){
this.setCss(this.getId('gy_photoBox_prev'),{'display':'none'});
this.setCss(this.getId('gy_photoBox_next'),{'display':'none'});
}
if(this.sLen == 2){
switch(this.sIndex){
case 0:{
this.setCss(this.getId('gy_photoBox_prev'),{'display':'none'});
this.setCss(this.getId('gy_photoBox_next'),{'display':'block'});
};break;
case (this.sLen-1):{
this.setCss(this.getId('gy_photoBox_next'),{'display':'none'});
this.setCss(this.getId('gy_photoBox_prev'),{'display':'block'});
};break;
}
}
if(this.sLen>2){
switch(this.sIndex){
case 0:{
this.setCss(this.getId('gy_photoBox_prev'),{'display':'none'})
};break;
case (this.sLen-1):{
this.setCss(this.getId('gy_photoBox_next'),{'display':'none'})
};break;
default:{
this.setCss(this.getId('gy_photoBox_prev'),{'display':'block'});
this.setCss(this.getId('gy_photoBox_next'),{'display':'block'});
}
}
}
},
imgChange:function(){
var _that = this;
this.setCss(this.getId('gy_photoBox_tips'),{'display':'block'});
this.setCss(this.getId('gy_photoBox_main'),{'display':'none'});
this.btnIsShow();
setTimeout(function(){
_that.loadImg(_that.aImg_src[_that.sIndex]);
},_that.sDelay*1000);
},
btnPrev:function(){
var _that = this;
this.getId('gy_photoBox_prev').onclick = function(){
_that.sIndex--;
_that.imgChange();
}
},
btnNext:function(){
var _that = this;
this.getId('gy_photoBox_next').onclick = function(){
_that.sIndex++;
_that.imgChange();
}
},
loadImg:function(src){
var _that = this;
var object = new Image();
_that.setCss(_that.getId('gy_photoBox_tips'),{'display':'block'});
object.onload = function(){
if(!_that.getId('gy_photoBox')){
_that.createBoxDom();
}
//根据图片的大小设置box 样式
_that.nImgWidth = this.width;
_that.nImgHeight = this.height;
_that.setBoxCss();
//呈现
_that.getId('gy_photoBox_img').src = src;
_that.getId('gy_photoBox_title').innerHTML = _that.aImg_title[_that.sIndex];
_that.getId('gy_photoBox_index').innerHTML = (_that.sIndex+1);
_that.setCss(_that.getId('gy_photoBox'),{'display':'block'});
_that.setCss(_that.getId('gy_photoBox_main'),{'display':'block'});
_that.setCss(_that.getId('gy_photoBox_tips'),{'display':'none'});
}
object.onerror = function(){
_that.getId('gy_photoBox_tips').innerHTML = '图片数据出错，3秒后自动刷新';
if(_that.getId('gy_photoBox')){
document.body.removeChild(_that.getId('gy_photoBox'));
}
setTimeout(function(){
window.location.reload();
},3000);
}
// 注意：要放在onload事件下面，否则ie会出现BUG
object.src = src;
},
windowResize:function(){
var _that = this;
window.onresize = function(){
if( _that.getId('gy_photoBox')&&_that.getId('gy_photoBox_tips') ){
_that.setBoxCss();
_that.setTipsCss();
_that.setCoverCss();
}
}
},
int:function(){
var _that = this;
this.getData();
for(var n=0;n<this.sLen;n++){
this.oImg[n].index = n;
this.oImg[n].onclick = function(){
_that.setCss(document.documentElement,{'height':'100%','overflow-y':'hidden'});
// 获取当时索引
_that.sIndex = this.index;
// 插入覆盖层
_that.cover();
// 等待处理
_that.waitDo();
// loadimg
setTimeout(function(){
_that.loadImg(_that.aImg_src[_that.sIndex]);
},_that.sDelay*1000);
// resize
_that.windowResize();
}
}
}
}
觉得可用，就经常来吧！ 脚本宝典 欢迎评论哦！ js脚本，巧夺天工，精雕玉琢。小宝典献丑了！
以上是脚本宝典为你收集整理的javascript代码实例教程-原生javascript-图片弹窗交互全部内容，希望文章能够帮你解决javascript代码实例教程-原生javascript-图片弹窗交互所遇到的问题。
本图文内容来源于网友网络收集整理提供，作为学习参考使用，版权属于原作者。
如您有任何意见或建议可联系处理。小编QQ：384754419，请注明来意。