您的位置：首页 > 其它

点击小图显示图大，带上下翻页，关闭按钮

2013-09-29 10:25 281 查看

<!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 这个就可以用唔同的类式，不用规定死了

内容来自用户分享和网络整理，不保证内容的准确性，如有侵权内容，可联系管理员处理

标签：

相关文章推荐

新的分享

章节导航