Javascript JQuery覆盖图像onclick而不预加载

我有一个非常基本的图像库，它显示带有上一个/下一个链接的缩略图，单击缩略图时会打开全尺寸图像：

//目录图像的滑块
变量图像=$（“#滑块img”）；
var prevBtn=$（“#prev”）；
var nextBtn=$（“#下一步”）；
var total=图像长度；
var last=总计-1；
var first=0；
无功电流=第一；
函数showImage（索引）{
索引=（索引>上次）？上次：索引；
索引=（索引<第一）？第一：索引；
image.hide（）；
image.eq（index.show（）；
如果（总数=1）{
prevBtn.addClass（“已禁用”）；
nextBtn.addClass（“已禁用”）；
}else if（索引=最后一个）{
nextBtn.addClass（“已禁用”）；
if（index==last&&prevBtn.hasClass（'disabled'））{
prevBtn.removeClass（“已禁用”）；
}
}否则{
prevBtn.removeClass（“已禁用”）；
nextBtn.removeClass（'disabled'）；
}
}
prevBtn.单击（功能（e）{
e、 预防默认值（）；
当前--；
showImage（当前）；
});
下一步。单击（功能（e）{
e、 预防默认值（）；
电流++；
showImage（当前）；
});
$（“#滑块”）.toggle（）；
showImage（第一）
#滑块{
显示：无；
}
.残疾人{
指针事件：无；
不透明度：0.6；
}

|

修改了您的小提琴，使其包含单击缩略图和覆盖图。当前，在单击覆盖内的任何位置时，覆盖将关闭并移除
img
标记


//目录图像的滑块
变量图像=$（“#滑块img”）；
var prevBtn=$（“#prev”）；
var nextBtn=$（“#下一步”）；
var total=图像长度；
var last=总计-1；
var first=0；
无功电流=第一；
函数showImage（索引）{
索引=（索引>上次）？上次：索引；
索引=（索引<第一）？第一：索引；
image.hide（）；
image.eq（index.show（）；
如果（总数=1）{
prevBtn.addClass（“已禁用”）；
nextBtn.addClass（“已禁用”）；
}else if（索引=最后一个）{
nextBtn.addClass（“已禁用”）；
if（index==last&&prevBtn.hasClass（'disabled'））{
prevBtn.removeClass（“已禁用”）；
}
}否则{
prevBtn.removeClass（“已禁用”）；
nextBtn.removeClass（'disabled'）；
}
}
prevBtn.单击（功能（e）{
e、 预防默认值（）；
当前--；
showImage（当前）；
});
下一步。单击（功能（e）{
e、 预防默认值（）；
电流++；
showImage（当前）；
});
$（“#滑块”）.toggle（）；
showImage（第一）；
//缩略图点击
$（'.thumb'）。单击（函数（e）{
e、 预防默认值（）；
var url=$（this.attr（'href'）；
var img=“”；
$（“#覆盖”）.append（img）.addClass（“可见”）；
});
//关闭覆盖层
$（“#覆盖”）。单击（函数（）{
$（this.removeClass（'visible'）；
$（this.find（“img”）.remove（）；
})
#滑块{
显示：无；
}
.残疾人{
指针事件：无；
不透明度：0.6；
}
#覆盖层{
显示器：flex；
对齐项目：居中；
证明内容：中心；
位置：固定；
排名：0；
左：0；
右：0；
底部：0；
背景：rgba（0,0,0,0.3）；
可见性：隐藏；
}
#覆盖，可见{
能见度：可见；
}
#叠加img{
最大宽度：300px；
高度：自动；
}

|

修改了您的小提琴，使其包含单击缩略图和覆盖图。当前，在单击覆盖内的任何位置时，覆盖将关闭并移除
img
标记


//目录图像的滑块
变量图像=$（“#滑块img”）；
var prevBtn=$（“#prev”）；
var nextBtn=$（“#下一步”）；
var total=图像长度；
var last=总计-1；
var first=0；
无功电流=第一；
函数showImage（索引）{
索引=（索引>上次）？上次：索引；
索引=（索引<第一）？第一：索引；
image.hide（）；
image.eq（index.show（）；
如果（总数=1）{
prevBtn.addClass（“已禁用”）；
nextBtn.addClass（“已禁用”）；
}else if（索引=最后一个）{
nextBtn.addClass（“已禁用”）；
if（index==last&&prevBtn.hasClass（'disabled'））{
prevBtn.removeClass（“已禁用”）；
}
}否则{
prevBtn.removeClass（“已禁用”）；
nextBtn.removeClass（'disabled'）；
}
}
prevBtn.单击（功能（e）{
e、 预防默认值（）；
当前--；
showImage（当前）；
});
下一步。单击（功能（e）{
e、 预防默认值（）；
电流++；
showImage（当前）；
});
$（“#滑块”）.toggle（）；
showImage（第一）；
//缩略图点击
$（'.thumb'）。单击（函数（e）{
e、 预防默认值（）；
var url=$（this.attr（'href'）；
var img=“”；
$（“#覆盖”）.append（img）.addClass（“可见”）；
});
//关闭覆盖层
$（“#覆盖”）。单击（函数（）{
$（this.removeClass（'visible'）；
$（this.find（“img”）.remove（）；
})
#滑块{
显示：无；
}
.残疾人{
指针事件：无；
不透明度：0.6；
}
#覆盖层{
显示器：flex；
对齐项目：居中；
证明内容：中心；
位置：固定；
排名：0；
左：0；
右：0；
底部：0；
背景：rgba（0,0,0,0.3）；
可见性：隐藏；
}
#覆盖，可见{
能见度：可见；
}
#叠加img{
最大宽度：300px；
高度：自动；
}

|