<!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 这个就可以用唔同的类式，不用规定死了
转载于:https://www.cnblogs.com/vania/p/3345309.html
相关资源：html5 图书翻页效果
