抽空自己写了一个简单的js相册，希望与大家分享。就利用jquery写的，比较简单的一个相册功能。原理很简单，就是点击小图的同时获取其src地址，传递给大图即ok。
demo地址:http://www.herodl.com/blog/demo/photoshow/photo.html
<!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Strict//EN" "http://www.w3.org/TR/xhtml1/DTD/xhtml1-strict.dtd">
<html xmlns="http://www.w3.org/1999/xhtml">
<head>
<meta http-equiv="Content-Type" content="text/html; charset=utf-8" />
<title>相册图片浏览-恒越动力</title>
<meta name="robots" content="all" />
<style type="text/css">
*{margin:0;padding:0;font-size:12px}
#wrapper{width:550px;margin:100px auto}
#showPic{width:500px;height:500px;background:#eee;overflow:hidden}
#showPic img{display:block;margin:0 auto}
#list_img{position:relative;width:500px;}
#abb_img{width:450px;overflow:hidden;height:70px;position:absolute;left:26px;top:5px;}
#abb_img ul{width:500%;height:70px;position:absolute;left:0}
#abb_img ul li{float:left;display:inline;width:70px;height:70px;margin:0 5px 0 0;cursor:pointer}
#abb_img ul li img{width:68px;height:68px;border:1px solid #fff}
#abb_img ul li img.border{border:1px solid #000}
#pre,#next{width:15px;height:39px;text-indent:-9999em;background:url(images/bt.jpg) no-repeat 0 0;position:absolute;top:20px;left:0;cursor:pointer}
#next{background-position:-15px 0;left:485px}
</style>
<script type="text/javascript" src="http://ajax.googleapis.com/ajax/libs/jquery/1.5.2/jquery.min.js"/></script>
</head>
<body>
<div id="wrapper">
<h1>相册图片浏览-恒越动力</h1>
<div id="showPic">
<img src=""/>
</div>
<div id="list_img">
<div id="pre">点击向左</div>
<div id="abb_img">
<ul>
<li><img src="images/1.jpg"/></li>
<li><img src="images/2.jpg"/></li>
<li><img src="images/3.jpg"/></li>
<li><img src="images/4.jpg"/></li>
<li><img src="images/5.jpg"/></li>
<li><img src="images/6.jpg"/></li>
<li><img src="images/7.jpg"/></li>
<li><img src="images/8.jpg"/></li>
<li><img src="images/9.jpg"/></li>
<li><img src="images/7.jpg"/></li>
<li><img src="images/8.jpg"/></li>
<li><img src="images/9.jpg"/></li>
<li><img src="images/10.jpg"/></li>
</ul>
</div>
<div id="next">点击向右</div>
</div>
</div>
<script type="text/javascript">
window.onload=function(){
var n=2;//点击一次移动图片的张数
//初始化大图
var src=$("#abb_img li img:first").attr("src");
$("#showPic img").attr("src",src);
//点击向右
$("#next").click(function(){
var c=parseInt($("#abb_img ul").css("left"));
c=c-75*n;
//获取li数量
var i=$("#abb_img ul li").length;
var m=(i-6)*(-75);
if(m>c){
return false;
}
else{
$("#abb_img ul").animate({left:c},{queue:false,duration:100});
}
});
//点击向左
$("#pre").click(function(){
var c=parseInt($("#abb_img ul").css("left"));
if(c>=0){
return false;}
else{
c=c+75*n;
$("#abb_img ul").animate({left:c},{queue:false,duration:100});}
});
//点击某一个图片，获取其src,传递给大图
$("#abb_img ul li img").click(function(){
src=$(this).attr("src");
$("#showPic img").attr("src",src);
$("#abb_img ul li img").removeClass("border");
$(this).addClass("border");
});
}
</script>
</body>
</html>