这篇文章主要介绍了jquery插件jquery .LightBox.js实现点击放大图片并左右点击切换效果，可实现仿相册插件切换效果，并附代码演示源码供读者下载参考，需要的朋友可以参考下
本文实例讲述了jquery插件jquery .LightBox.js实现点击放大图片并左右点击切换效果。分享给大家供大家参考，具体如下：
该插件乃文章作者所写，目的在于提升作者的射流研究…能力，也给一些射流研究…菜鸟在使用插件时提供一些便利，老鸟就悠然地飞过吧。
此插件旨在实现目前较为流行的点击放大图片并左右点击切换图片的效果，您可以根据自己的实际需求来设置是否添加左右切换图片的效果。整体代码如下：
！DOCTYPE html PUBLIC -//W3C//DTD XHTML 1.0 Transitional//EN
http://www。w3。org/TR/XHTML 1/DTD/XHTML 1-过渡。 DTD
html xmlns= http://。w3。 org/1999/XHTML
头
meta http-equiv= Content-Type Content= text/html；charset=utf-8 /
标题无标题文档/标题
风格
* {边距：0;填充：0;}
李（列表式：无；}。item { margin:20px；}。项ul Li { float:left；右边距：20px}。item ul Li img { width:100p x；光标：指针；}。lb_wrap{display:无；}。灯箱_ BG {背景：# 000；滤镜：阿尔法(不透明度=70);不透明度：7;位置：绝对；左：0;top:0；宽度：100%;身高：100%;z指数：1;}。灯箱{位置：绝对；左：0;top:50%；宽度：100%;z指数：2;文本对齐：居中；}。灯箱p {位置：绝对；身高：61px宽度：38pxtop:50%；左：0;z指数：2;背景：透明url(themes.png)无重复左上；margin-top:-30.5像素；光标：指针；}。灯箱p . next { left:auto；背景-位置：右上；右：0;}
/风格
脚本类型= text/JavaScript src= jquery-1。7 .1 .js /脚本
脚本类型=text/javascript src=jquery .灯箱。js /脚本
/头
身体
div class=item
保险商实验所
liimg src=01.jpg //li
liimg src=02.jpg //li
liimg src=03.jpg //li
liimg src=04.jpg //li
liimg src=05.jpg //li
liimg src=06.jpg //li
/ul
/div
脚本
$(function(){
$(.项)。灯箱({
控件：true //上一张、下一张按钮是否显示，默认是显示真实的
});
})
/脚本
/body
/html
插件jquery .LightBox.js代码：
/*
*LightBox 1.0
*依赖关系jquery-1.7.1.js
*/
；（功能(一){
a.fn .灯箱=功能（选项){
定义变量默认值={
控件：true //上一张、下一张按钮是否显示，默认是显示真实的
}
var opts=a.extend(默认值，选项);
var lb _ wrap= div class= lb _ wrap div class= light box _ BG /div div class= light box img src= loading。gif class= LG _ img /div；
一个(体)。append(lb _ wrap)；
//控件
if(opts.controls){
一个(。灯箱)。追加( p class= prev /PP class= next /p))；
}
函数imgobj(obj1，obj2){
//imgObj.height是通过img对象获取的图片的实际高度
var imgObj=new Image()；
imgobj。src=obj 1。attr( src )；
var margin top=0-(imgobj。高度)/2；
obj2.css(margin-top ，margin top)；
}
this.each(function(){
var obj=a(this)；
var numpic=obj.find(li ).长度；
var num=0；
//点击赋值并显示
找到(img).单击（函数(){
var src=a(this).attr( src )；
一个(。LG _ img’).attr(src ，src)；
imgobj(a(.lg_img )、一个(。灯箱’))；
一个(。lb_wrap ).淡入()；
一个(。LG _ img’).淡入()；
一个(。上一页)。淡入()。兄弟姐妹(。下一个)。淡入()；
num=a(这个)。父级()。index()；//获取当前图片的父元素的索引并赋给数字为后边点击上一张、下一张服务
});
//上一张
一个(。上一页)。单击（函数(){
if(num==0){
num=numpic
}
var src=obj.find(li ).等式（数字-1)。查找( img ).attr( src )；
一个(。LG _ img’).attr(src ，src)；
imgobj(a(.lg_img )、一个(。灯箱’))；
num-；
});
//下一张
一个(。下一个)。单击（函数(){
if(num==numpic-1){
num=-1；
}
var src=obj.find(li ).等式（数字1)。查找( img ).attr( src )；
一个(。LG _ img’).attr(src ，src)；
imgobj(a(.lg_img )、一个(。灯箱’))；
数字
});
//点击除了上一张、下一张之外的其他地方隐藏
一个(。lb_wrap ).点击（功能(e){
var e=e | | window.event
var elem=e . target | | e . src元素；
while(elem){
如果(elem。类名elem。类名。索引( prev )-1){
返回；
}
如果(elem。类名elem。类名。的索引(下一个)-1){
返回；
}
elem=elem.parentNode
}
答（这个)。查找( img ).attr(src ， loading.gif ).hide()；//隐藏后，再将默认的图片赋给灯箱中图片的科学研究委员会
答（这个)。查找(。上一页)。隐藏()。兄弟姐妹(。下一个)。hide()；
答（这个)。fadeOut()；
});
})
}
})(jQuery)；
完整实例代码点击此处本站下载。
更多关于jQuery相关内容感兴趣的读者可查看本站专题： 《jQuery拖拽特效与技巧总结》 、 《jQuery扩展技巧总结》 、 《jQuery常见经典特效汇总》 、 《jQuery动画与特效用法总结》 及《jquery选择器用法总结》
希望本文所述对大家jQuery程序设计有所帮助。
