<!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=utf-8" />
<meta http-equiv="Content-Language" content="zh-CN" />
<meta content="all" name="robots" />
<meta name="author" content="中国万网,hichina,chinaok" />
<meta name="Copyright" content="" />
<meta name="description" content="" />
<meta name="keywords" content="" />
<title>动画相册</title>
<link rel="stylesheet" type="text/css" href="css/style.css" />
<script src="js/jquery-1.3.2.min.js" type="text/javascript"></script>
</head>
<body>
<div id="wrapper"><div id="galleryBox"> <ul id="ul_gallery">
<li><img src="images/1.jpg" alt="" /></li>
<li><img src="images/2.jpg" alt="" /></li>
<li><img src="images/3.jpg" alt="" /></li>
<li><img src="images/4.jpg" alt="" /></li>
<li><img src="images/5.jpg" alt="" /></li> <li><img src="images/6.jpg" alt="" /></li>
<li><img src="images/7.jpg" alt="" /></li>
<li><img src="images/8.jpg" alt="" /></li>
<li><img src="images/9.jpg" alt="" /></li>
<li><img src="images/10.jpg" alt="" /></li>
</ul> <span id="span_next">«</span><span id="span_prev">»</span> <script type="text/javascript">
var ul=$("#ul_gallery");
var li=$("#ul_gallery li");
var img=$("#ul_gallery img");
li.eq(0).css({left:"0px",display:"block"});
li.eq(1).css({top:"0",left:"150px",width:"500px",height:"333px",display:"block"});
img.eq(1).css({width:"500px",height:"333px"});
li.eq(2).css({display:"block"});
var x=img.length-1;
var y=1;
$("#span_next").click(function() {
if(y<x){
if(y==(x-1)){$("#span_next").fadeOut();}
$("#span_prev").show();
y++;
li.eq(y).animate({top:"0",left:"150px",width:"500px",height:"333px"});
img.eq(y).animate({width:"500px",height:"333px"});
li.eq(y+1).fadeIn("slow");
li.eq(y-1).animate({top:"120px",left:"0",width:"100px",height:"67px"});
img.eq(y-1).animate({width:"100px",height:"67px"});
}
});
$("#span_prev").click(function() { if(y>0){
if(y==1){$("#span_prev").fadeOut();}
$("#span_next").show();
y--;
li.eq(y).animate({top:"0",left:"150",width:"500px",height:"333px"});
img.eq(y).animate({width:"500px",height:"333px"});
li.eq(y+2).fadeOut("slow");
li.eq(y+1).animate({top:"120",left:"700",width:"100px",height:"67px"});
img.eq(y+1).animate({width:"100px",height:"67px"});
}
});
</script>
</div>
</div>
</body>
</html> |
注册 登录
