jquery多张叠加图片上下切换代码

版权：原创更新时间：1年以上

[该文章底部包含文件资源,可根据自己情况,决定是否下载资源使用,时间>金钱,如有需要,立即查看资源]

以下是 jquery多张叠加图片上下切换代码的示例演示效果:

当前平台(PC电脑)

平台:

整屏预览

部分效果截图:

HTML代码(index.html):

<!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" />
<title>jquery多张叠加图片上下切换代码</title>
<link rel="stylesheet" type="text/css" media="screen" href="css/style.css" />
<script type="text/javascript" src="js/jquery-1.3.2.min.js"></script>
<script type="text/javascript" src="js/script.js"></script>
</head>
<body>
<div id="gallery">
	<div id="pictures">
		<img src="images/picture1.png" alt="" />
		<img src="images/picture2.png" alt="" />
		<img src="images/picture3.png" alt="" />
		<img src="images/picture4.png" alt="" />
		<img src="images/picture5.png" alt="" />
	</div>
	<div id="prev"><a href="#previous">&laquo; 上一张</a></div>
	<div id="next"><a href="#next">下一张 &raquo;</a></div>
</div>
</body>
</html>

JS代码(script.js):

$(document).ready(function(){
	//perform actions when DOM is ready var z = 0;
	//for setting the initial z-index's var inAnimation = false;
	//flag for testing if we are in a animation $('#pictures img').each(function(){
	//set the initial z-index's z++;
	//at the end we have the highest z-index value stored in the z variable $(this).css('z-index',z);
	//apply increased z-index to <img>}
);
	function swapFirstLast(isFirst){
	if(inAnimation) return false;
	//if already swapping pictures just return else inAnimation = true;
	//set the flag that we process a image var processZindex,direction,newZindex,inDeCrease;
	//change for previous or next image if(isFirst){
	processZindex = z;
	direction = '-';
	newZindex = 1;
	inDeCrease = 1;
}
//set variables for "next" action else{
	processZindex = 1;
	direction = '';
	newZindex = z;
	inDeCrease = -1;
}
//set variables for "previous" action $('#pictures img').each(function(){
	//process each image if($(this).css('z-index') == processZindex){
	//if its the image we need to process $(this).animate({
	'top':direction + $(this).height() + 'px'}
,'slow',function(){
	//animate the img above/under the gallery (assuming all pictures are equal height) $(this).css('z-index',newZindex) //set new z-index .animate({
	'top':'0'}
,'slow',function(){
	//animate the image back to its original position inAnimation = false;
	//reset the flag}
);
}
);
}
else{
	//not the image we need to process,only in/de-crease z-index $(this).animate({
	'top':'0'}
,'slow',function(){
	//make sure to wait swapping the z-index when image is above/under the gallery $(this).css('z-index',parseInt($(this).css('z-index')) + inDeCrease);
	//in/de-crease the z-index by one}
);
}
}
);
	return false;
	//don't follow the clicked link}
$('#next a').click(function(){
	return swapFirstLast(true);
	//swap first image to last position}
);
	$('#prev a').click(function(){
	return swapFirstLast(false);
	//swap last image to first position}
);
}
);

CSS代码(style.css):

@charset "utf-8";*{margin:0;padding:0;list-style-type:none;}
a,img{border:0;}
body{font:12px/180% "微软雅黑";background:#22384d;color:#555555;}
a{color:#0F67A1;text-decoration:none;}
a:hover{text-decoration:underline;}
#gallery{position:relative;width:460px;margin:40px auto 0 auto;}
#pictures{position:relative;height:408px;}
#pictures img{position:absolute;top:0;left:0;}
#prev{float:left;display:inline;margin-left:40px;}
#next{float:right;display:inline;margin-right:40px;}
#prev,#next{margin-top:10px;text-align:center;font-size:2.0em;}

附件:下载该文件资源,减少时间成本(增值服务)