精美相册案例

overflow：

box-shadow:

javascript:

.eq():

attr():

fadeIn:

animate:

prepend:

精美相册的js代码实现：

$("#picList img").click(function(){
//	获取点击元素(此处为img)的下标
    var index = $(this).index();
//  src="img/show/0/5.jpg" 
    for(var i=0;i<5;i++)
    {
    	var url = "img/show/"+index+"/"+(i+1)+".jpg"
    	//eq得到当前值 attr替换某值
    	$("#showImg img").eq(i).attr("src",url);
    }
    //fadein()淡入
    $("#shelter,#show").fadeIn(500);
});
//点击相册外的部分，显示的相册 图片消失
$("#shelter").click(function(){
	$("#shelter,#show").fadeOut(200);//淡出
});
//点击下一张切换图片
$("#next").click(function(){
	$("#showImg img:last-child").animate({"left":"650px"},500,function(){//当前显示的图片先向右移650px 产生动画效果 移到最后一张
		$(this).animate({"left":"0px"},500);//当前显示图片回到相册的最初位置
		$("#showImg").prepend($(this)); //添加到相册的第一张
	});
	//即将显示的图片右移的动画效果
	$("#showImg").animate({"left":"40%"},500);
	$("#showImg").animate({"left":"50%"},500);
});
//原理同next一样
$("#prev").click(function(){
	$("#showImg img:first-child").animate({"left":"-650px"},500,function(){
		$(this).animate({"left":"0px"},500);
		$("#showImg").append($(this));
	});
	$("#showImg").animate({"left":"60%"},500);
	$("#showImg").animate({"left":"50%"},500);
});

效果图：
相册展示

选中相片查看：