jquery图片叠加点击轮换效果js代码

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

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

以下是 jquery图片叠加点击轮换效果js代码的示例演示效果:

当前平台(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>
<script type="text/javascript" src="js/jquery-1.9.1.min.js"></script>
<script type="text/javascript" src="js/pic_back_turn.js"></script>

<style type="text/css">
*{padding:0;margin:0;}
li{list-style:none;}
body{background:#ccc;}
/* wrap */
#wrap{width:620px;height:300px;overflow:hidden;margin:50px auto;position:relative;border:solid 2px #fff;}
#pic0{width:300px;height:300px;z-index:4;position:absolute;top:0px;left:320px;cursor:pointer;}
#pic1{width:280px;height:280px;z-index:3;position:absolute;top:10px;left:240px;cursor:pointer;}
#pic2{width:260px;height:260px;z-index:2;position:absolute;top:20px;left:160px;cursor:pointer;}
#pic3{width:240px;height:240px;z-index:1;position:absolute;top:30px;left:80px;cursor:pointer;}
#pic4{width:220px;height:220px;z-index:0;position:absolute;top:40px;left:0px;cursor:pointer;}
</style>
</head>
<body>
<div id="wrap">
		<img id="pic0" src="images/1.png" alt="第1张图片">
		<img id="pic1" src="images/2.png" alt="第2张图片">
		<img id="pic2" src="images/3.png" alt="第3张图片">
		<img id="pic3" src="images/4.png" alt="第4张图片">
		<img id="pic4" src="images/5.png" alt="第5张图片">
	</div>
</body>
</html>

JS代码(pic_back_turn.js):

$(function(){
	//获取节点var img = $('#wrap img');
	//每张图片/*用于计算的部分变量*/
var imgNow = 0;
	//记录当前的排头图片，默认0var imgNum = img.size();
	//记录图片总数量//排头图片的相关信息var imgTop = img.eq(0).position().top;
	//距离顶部的距离var imgMaxHeight = img.eq(0).outerHeight(true);
	//排头图片的高度,300pxvar imgMaxWidth = img.eq(0).outerWidth(true);
	//排头图片的宽度,300px//待操作的图片的相关信息var waitImg = 0;
	//记录待操作的图片小标var waitImgWidth = 0;
	//待操作图片的宽度var waitImgHeight = 0;
	//待操作图片的高度var waitImgTop = 0;
	//待操作图片的顶部距离var waitImgLeft = 0;
	//待操作图片的左端距离var waitImgZindex = 0;
	//待操作图片的立体高度var xDistance = 80;
	//相邻图片x方向上的间隔var yDistance = 10;
	//相邻图片y方向上的间隔var sizeDistance = 20;
	//相邻图片的大小差异/*******方法********/
/*设置x,y方向上相邻图片的间隔*/
function distance(x,y){
	xDistance = x;
	yDistance = y;
}
/*排头，图片向下移动并隐藏 方法*/
function moveDown(obj){
	obj.animate({
	'top':imgTop+imgMaxHeight+'px'}
,500);
}
/*排头图片属性改变 方法*/
function changeAttr(){
	img.eq(imgNow).css({
	'width':imgMaxWidth-(imgNum-1)*sizeDistance + 'px','height':imgMaxHeight-(imgNum-1)*sizeDistance + 'px','top':imgMaxHeight + 'px','left':0,'z-index':0}
);
}
/*中间的图片移动 方法*/
function picMidMove(){
	for(var i=1;
	i<imgNum;
	i++){
	if(imgNow+i<imgNum){
	waitImg = imgNow+i;
}
else{
	waitImg = imgNow+i-imgNum;
}
//获得图片当前的属性waitImgWidth = img.eq(waitImg).outerWidth(true);
	waitImgHeight = img.eq(waitImg).outerWidth(true);
	waitImgTop = img.eq(waitImg).position().top;
	waitImgLeft = img.eq(waitImg).position().left;
	waitImgZindex = img.eq(waitImg).css('z-index');
	//计算移动后的属性waitImgWidth += sizeDistance;
	waitImgHeight += sizeDistance;
	waitImgTop -= yDistance;
	waitImgLeft += xDistance;
	if(waitImgZindex == (img.length - 1)){
	waitImgZindex = 0;
}
else{
	waitImgZindex ++;
}
//设置属性img.eq(waitImg).animate({
	'width':waitImgWidth + 'px','height':waitImgHeight + 'px','top':waitImgTop + 'px','left':waitImgLeft + 'px','z-index':waitImgZindex}
,500);
}
}
/*排尾，图片出现并向上移动 方法*/
function moveUp(obj){
	obj.animate({
	'top':imgTop+(imgNum-1)*yDistance+'px'}
,500,function(){
	/*重置图片标记，确定下一张排头图片*/
if(imgNow == imgNum-1){
	imgNow = 0;
}
else{
	imgNow ++;
}
}
);
}
/*******事件********/
//图片-鼠标事件img.bind('click',function(){
	//遮罩显示$('#wrap').append('<div id="layer" style="width:620px;
	height:300px;
	position:absolute;
	top:0;
	left:0;
	z-index:5;
	opacity:0;
	filter:Alpha(opacity=0);
	"></div>');
	// $('#layer').show();
	/*排头图片从行首隐藏*/
moveDown(img.eq(imgNow));
	setTimeout(function(){
	changeAttr();
}
,500);
	/*之后的图片运动顶替*/
setTimeout(function(){
	picMidMove();
}
,500);
	/*排头图片在行尾出现*/
setTimeout(function(){
	moveUp(img.eq(imgNow));
}
,1200);
	//遮罩隐藏setTimeout(function(){
	// $('#layer').hide();
	$('#layer').remove();
}
,1800);
}
);
}
);

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