jquery插件jquery.LightBox.js实现点击放大图片并左右点击切换效果(附demo源码下载)
本文实例讲述了jquery插件jquery.LightBox.js实现点击放大图片并左右点击切换效果。分享给大家供大家参考，具体如下：
该插件乃文章作者所写，目的在于提升作者的js能力，也给一些js菜鸟在使用插件时提供一些便利，老鸟就悠然地飞过吧。
此插件旨在实现目前较为流行的点击放大图片并左右点击切换图片的效果，您可以根据自己的实际需求来设置是否添加左右切换图片的效果。整体代码如下：
<!DOCTYPEhtmlPUBLIC"-//W3C//DTDXHTML1.0Transitional//EN"
"http://www.w3.org/TR/xhtml1/DTD/xhtml1-transitional.dtd">
<htmlxmlns="http://www.w3.org/1999/xhtml">
<head>
<metahttp-equiv="Content-Type"content="text/html;charset=utf-8"/>
<title>无标题文档</title>
<style>
*{margin:0;padding:0;}
li{list-style:none;}
.item{margin:20px;}
.itemulli{float:left;margin-right:20px;}
.itemulliimg{width:100px;cursor:pointer;}
.lb_wrap{display:none;}
.lightbox_bg{background:#000;filter:alpha(opacity=70);opacity:.7;position:absolute;left:0;top:0;width:100%;height:100%;z-index:1;}
.lightbox{position:absolute;left:0;top:50%;width:100%;z-index:2;text-align:center;}
.lightboxp{position:absolute;height:61px;width:38px;top:50%;left:0;z-index:2;background:transparenturl(themes.png)no-repeatlefttop;margin-top:-30.5px;cursor:pointer;}
.lightboxp.next{left:auto;background-position:righttop;right:0;}
</style>
<scripttype="text/javascript"src="jquery-1.7.1.js"></script>
<scripttype="text/javascript"src="jquery.LightBox.js"></script>
</head>
<body>
<divclass="item">
<ul>
<li><imgsrc="01.jpg"/></li>
<li><imgsrc="02.jpg"/></li>
<li><imgsrc="03.jpg"/></li>
<li><imgsrc="04.jpg"/></li>
<li><imgsrc="05.jpg"/></li>
<li><imgsrc="06.jpg"/></li>
</ul>
</div>
<script>
$(function(){
$(".item").LightBox({
controls:true//上一张、下一张按钮是否显示，默认是显示true
});
})
</script>
</body>
</html>
插件jquery.LightBox.js代码：
/*
*LightBox1.0
*dependencejquery-1.7.1.js
*/
;(function(a){
a.fn.LightBox=function(options){
vardefaults={
controls:true//上一张、下一张按钮是否显示，默认是显示true
}
varopts=a.extend(defaults,options);
varlb_wrap='<divclass="lb_wrap"><divclass="lightbox_bg"></div><divclass="lightbox"><imgsrc="loading.gif"class="lg_img"></div></div>';
a("body").append(lb_wrap);
//controls
if(opts.controls){
a(".lightbox").append('<pclass="prev"></p><pclass="next"></p>');
}
functionimgobj(obj1,obj2){
//imgObj.height是通过img对象获取的图片的实际高度
varimgObj=newImage();
imgObj.src=obj1.attr("src");
varmargintop=0-(imgObj.height)/2;
obj2.css("margin-top",margintop);
}
this.each(function(){
varobj=a(this);
varnumpic=obj.find("li").length;
varnum=0;
//点击赋值并显示
obj.find("img").click(function(){
varsrc=a(this).attr("src");
a(".lg_img").attr("src",src);
imgobj(a(".lg_img"),a(".lightbox"));
a(".lb_wrap").fadeIn();
a(".lg_img").fadeIn();
a(".prev").fadeIn().siblings(".next").fadeIn();
num=a(this).parent().index();//获取当前图片的父元素的索引并赋给num为后边点击上一张、下一张服务
});
//上一张
a(".prev").click(function(){
if(num==0){
num=numpic;
}
varsrc=obj.find("li").eq(num-1).find("img").attr("src");
a(".lg_img").attr("src",src);
imgobj(a(".lg_img"),a(".lightbox"));
num--;
});
//下一张
a(".next").click(function(){
if(num==numpic-1){
num=-1;
}
varsrc=obj.find("li").eq(num+1).find("img").attr("src");
a(".lg_img").attr("src",src);
imgobj(a(".lg_img"),a(".lightbox"));
num++;
});
//点击除了上一张、下一张之外的其他地方隐藏
a(".lb_wrap").click(function(e){
vare=e||window.event;
varelem=e.target||e.srcElement;
while(elem){
if(elem.className&&elem.className.indexOf('prev')>-1){
return;
}
if(elem.className&&elem.className.indexOf('next')>-1){
return;
}
elem=elem.parentNode;
}
a(this).find("img").attr("src","loading.gif").hide();//隐藏后，再将默认的图片赋给lightbox中图片的src
a(this).find(".prev").hide().siblings(".next").hide();
a(this).fadeOut();
});
})
}
})(jQuery);
完整实例代码点击此处本站下载。
更多关于jQuery相关内容感兴趣的读者可查看本站专题：《jQuery拖拽特效与技巧总结》、《jQuery扩展技巧总结》、《jQuery常见经典特效汇总》、《jQuery动画与特效用法总结》及《jquery选择器用法总结》
希望本文所述对大家jQuery程序设计有所帮助。