点击小图显示图大，带上下翻页，关闭按钮
<!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Transitional//EN" "http://www.w3.org/TR/xhtml1/DTD/xhtml1-transitional.dtd"> <html xmlns="http://www.w3.org/1999/xhtml"> <head> <meta http-equiv="Content-Type" content="text/html; charset=gb2312" /> <title>无标题文档</title> <script type="text/javascript" src="jquery.min.js"></script> <script type="text/javascript" src="img_box.js"></script> <style> ul{ list-style:none; padding:0px; margin:0px;} li{ list-style:none; padding:0px; margin:0px;} .imgshow_box{ width:810px; overflow:hidden;} .glay_box{ width:100%; height:100%; position:absolute; top:0px; left:0px; z-index:100px; background-color:#000000; opacity:0.4; display:none} .imgshow_box img{ width:200px; height:200px; border:3px #CCCCCC solid} .imgshow_box ul{ list-style:none;} .imgshow_box li{ float:left; width:220px; height:220px; padding-right:5px;} .Bigimg_box{ display:none; z-index:200px; position:absolute; top:20%; left:20%; background-color:#000000;border:3px solid #CCCCCC; } .Bigimg_show{ overflow:hidden;background:url(img/ajax-loader.gif) no-repeat center;} .Bigimg_show .imgclose{ cursor:pointer; background:url(img/close_t.gif) no-repeat; float:right; width:81px; height:18px; z-index:201px; position:absolute; right:8px;} .Bigimg_show .img_url{ width:100%;} .Bigimg_show .imgtit{width:100%; height:30px; background-color:#000000;opacity:0.8; color:#FFFFFF;z-index:201px; position:absolute; bottom:20px;} .Bigimg_show .imgbottom{ height:21px; background-color:#000000; width:100%; position:absolute; bottom:0px;} .Bigimg_show .imgnext{ cursor:pointer; background:url(img/next_tt.gif) no-repeat; float:right; width:22px; height:18px; z-index:201px; position:absolute; right:0px; bottom:3px; } .Bigimg_show .imgprev{ cursor:pointer; background:url(img/prev_tt.gif) no-repeat; float:left; width:22px; height:18px; z-index:201px; position:absolute; left:0px; bottom:3px;} </style> </head> <body> <div class='glay_box'></div> <div class="imgshow_box"> <ul> <li><a href="#"><img src="img/1.jpg" /></a></li> <li><a href="#"><img src="img/2.jpg" /></a></li> <li><a href="#"><img src="img/3.jpg" /></a></li> <li><a href="#"><img src="img/4.jpg" /></a></li> <li><a href="#"><img src="img/5.jpg" /></a></li> </ul> </div> <div class="Bigimg_box"> <div class="Bigimg_show"><div class="imgclose"></div> <img src="img/3.jpg" id="big_url"/> <div class="imgtit">产品介绍</div> <div class="imgbottom"><div class="imgprev"></div><div class="imgnext"></div></div> </div></div> </body> </html> <script language="javascript"> $(function(){ $(".imgshow_box li").img_box(); }); </script>
(function($){ $.fn.img_box=function(event){ var img=$(this); var pclose=$(".imgclose"); var pnext=$(".imgnext"); var pprev=$(".imgprev"); var bigbox=$(".Bigimg_box"); var maxli=$(this).length; var winwidth=$(window).width(),winheight=$(window).height(),pointli; //pic click start img.click(function(){ var index=img.index(this); pointli=img.eq(index); picshow(pointli); }); //close click start pclose.click(function(){ bigbox.attr("style","display:none"); $(".glay_box").attr("style","display:none"); }); //next click start pnext.click(function(){ pointli=img.parent().find("li.start").next("li") img.parent().find("li.start").removeClass("start"); picshow(pointli); }); //pre click start pprev.click(function(){ pointli=img.parent().find("li.start").prev("li") img.parent().find("li.start").removeClass("start"); picshow(pointli); }); //bigpic show function picshow(pointli){ //bigbox.attr({width:"0px",height:"0px"},1000); $(".glay_box").attr("style","display:block"); bigbox.attr("style","display:block"); $src=pointli.find("img").attr("src"); pointli.addClass("start") $("#big_url").attr("src",$src); var pwidth=$("#big_url").width(); var pheight=$("#big_url").height(); $("#big_url").hide() //$(".imgtit").text(pheight+"66"+winheight+"d"+pwidth); if(pheight>winheight){ radio=winheight/pheight; pwidth=pwidth*radio; pheight=winheight; } if(pwidth>winwidth){ radio=winwidth/pwidth; pheight=pheight*radio; pwidth=winwidth; } var leftpoint=(winwidth-pwidth)/2 var toppoint=(winheight-pheight)/2 //$(".imgtit").text(radio); bigbox.animate({"top":toppoint+"px","left":leftpoint + "px"},1000); $(".big_url").attr({width:pwidth,height:pheight}); $(".Bigimg_show").animate({width:pwidth,height:pheight},1000,function(){ $("#big_url").fadeIn(); }); /*判断当前li是不是是每一个或最后一个*/ var num=pointli.nextAll().length; //$(".imgtit").text(num); (num==0)?pnext.hide():pnext.show(); (num==maxli-1)?pprev.hide():pprev.show(); } //doction click $(document).mouseup(function(e){ if($(e.target).parent(".Bigimg_box").length==0 ) { $(".glay_box").attr("style","display:none"); bigbox.attr("style","display:none"); } }); } })(jQuery)
还有一些地方需要改进的，例如可以加入扩展expent 这个就可以用唔同的类式，不用规定死了
