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=gb2312" />
<title>jQuery图片重叠滑动切换效果代码 </title>
</head>
<body>
<style type="text/css">
*{margin:0;padding:0;list-style-type:none;}
a,img{border:0;}
.picbox{position: relative;width:780px;height:400px;overflow:hidden;margin:100px auto 0 auto;}
.sss{z-index:1;}
.ss{z-index:2}
</style>

<div class="picbox">

	<img class="src sss" src="img/1.jpg" width="420" height="210" alt="" style="position:absolute;top:87px;left:174px;" />
	
	<img class="src" src="img/2.jpg" width="384" height="192" alt=""/>
	<img class="src" src="img/3.jpg" width="384" height="192" alt=""/>
	<img class="src" src="img/4.jpg" width="384" height="192" alt=""/>
	<img class="src " src="img/5.jpg" width="384" height="192" alt="" />
</div>

<script type="text/javascript" src="js/jquery-1.7.1.min.js" ></script>
<script type="text/javascript">
var s=$(".src");
for(var i=0;i< s.length;i++){
	s.eq(i).css({top: s.eq(i).position().top,left: s.eq(i).position().left})
}
s.css("position","absolute");

$.each(s,function(k,v){
				  
	$(v).bind("mouseover",function(){
		if(!s.is(":animated")){
			if(!$(v).hasClass("sss")){
				var sss=$(".sss");
				var ls=sss.position().left;
				var ts=sss.position().top;
				var ws=sss.width();
				var hs=sss.height();
				s.eq(k).addClass("ss").animate({left: ls,top: ts,width: ws,height: hs},360);
				sss.animate({left: $(v).position().left,top: $(v).position().top,width: $(v).width(),height: $(v).height()},400,"swing",
				function(){
					$(this).removeClass("sss");
					s.eq(k).addClass("sss").removeClass("ss")
				});
			}
		}
	});
	
});
</script>
</body>
</html>

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