jQuery相册代码

$(function (){
	var x=0,width,height,ul=$(".content"),bottom=$(".bottom"),t//赋值
	function img_block(){//显示图片的函数
		bottom.stop();//图片说明区域动画停止
		ul.stop();//图片动画停止，其实是包含图片的ul标签动画停止
		$(".content li").css("display","none");//所有图片不显示
		bottom.css({"height":"0px"});//所有图片说明部分高度为0也表示不显示
		$("#xz").text(x+1);//如当前是第一张图片那么其位置在计算机里面是0，此处显示x+1，用文本显示当前是第几幅图片
        width=parseInt($(".content li:eq("+x+")").css("width"));//获取图片宽度
		height=parseInt($(".content li:eq("+x+")").css("height"));//获取图片高度
		ul.animate({"width":width+"px","height":height+"px"},500,function (){//以动画的形式 让包含图片的ul标签和图片一样大
			$(".content li:eq("+x+")").css("display","block");//让当前图片显示，"+x+"也可以替换为x，x是全局函数，初始值为0即第一张，在rights函数和left标签单击事件中进行累加累减。
			bottom.css("width",width+"px");//让图片说明区域宽度和图片一样宽
			bottom.animate({"height":"50px"});//以动画形式打开图片说明区域，让高度为50像素。
			$(".left,.right").css({"width":width/2+"px","height":height+"px"})//在图片上面添加超链接，宽度均为图片一半，高度与图片相等。
			});
		};
	function rights(){
		if(x==$(".content li").length-1){x=0;}//如果当前图片序列是最后一张，那么就切换第一张。
		else{x++};//否则就显示下一张
		img_block();//显示图片函数
		};
	$(document).ready(function() {//入口
		$("#imgdata").text($(".content li").length);//显示图片数量
		img_block();//显示图片函数
		t=setInterval(rights,4000);//4秒后执行rights函数显示下一张图片
    });
	$(".right").click(function (){rights()});//点击图片右边立刻显示下一张
	$(".left").click(function (){//点击图片左边离开显示前一张
		if(x==0){x=$(".content li").length-1;}//如果当前是第一张即x等于0，那么就让切换最后一张
		else{x--};//如果不是第一张那么就显示前面一张
		img_block();//显示图片函数
		});
	$(".left,.right").hover(function (){clearTimeout(t)},function (){t=setInterval(rights,4000)});//当鼠标悬停在图片其实是图片链接上时将清除函数rights的自动运行，鼠标离开后再次运行
});
 

 代码预览下载位置：http://www.lanrentuku.com/js/xiangce-996.html