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" href="css/style.css" />
<script type="text/javascript" src="js/jquery-2.0.0.min.js"></script>
<script type="text/javascript" src="js/jquery.roundabout.js"></script>
<script type="text/javascript" src="js/script.js"></script>
</head>
<body>
<div id="tour" class="zebra">
	<div class="wrap">
		<div class="switcher-wrap slider">
			<a class="prev jQ_sliderPrev" href=""></a>
			<a class="next jQ_sliderNext" href=""></a>

			<ul id="img-slider" style="height: 450px;">
				<li class="img">
					<img src="images/client.png" />
					<div class="label">Client</div>
				</li>
				<li class="img">
					<img src="images/developer.png" />
					<div class="label">Developer</div>
				</li>
				<li class="img">
					<img src="images/manager.png" />
					<div class="label">Manager</div>
				</li>
				<li class="img">
					<img src="images/tester.png" />
					<div class="label">Tester</div>
				</li>
				<li class="img">
					<img src="images/user.png" />
					<div class="label">Power User</div>
				</li>
			</ul>
			<ul class="switcher jQ_sliderSwitch">
				<li class="active"><a href=""></a></li>
				<li><a href=""></a></li>
				<li><a href=""></a></li>
				<li><a href=""></a></li>
				<li><a href=""></a></li>
			</ul>
		</div>
	</div>
</div>
</body>
</html>

JS代码(script.js):

$(document).ready(function(){
	$('#img-slider li').bind({
	reposition:function(){
	var degrees = $(this).data('roundabout').degrees,roundaboutBearing = $(this).parent().data('roundabout').bearing,rotateY = Math.sin((roundaboutBearing - degrees) * (Math.PI/180)) * 9;
	$(this).css({
	"-webkit-transform":'rotate(' + rotateY + 'deg)',"-moz-transform":'rotate(' + rotateY + 'deg)',"-ms-transform":'rotate(' + rotateY + 'deg)',"-o-transform":'rotate(' + rotateY + 'deg)',"transform":'rotate(' + rotateY + 'deg)'}
);
}
}
);
	$('.jQ_sliderPrev').on('click',function(){
	$('#img-slider').roundabout('animateToNextChild');
	return false;
}
);
	$('.jQ_sliderNext').on('click',function(){
	$('#img-slider').roundabout('animateToPreviousChild');
	return false;
}
);
	$('body').on('keyup',function(e){
	var keyCode = e.which || e.keyCode;
	if(keyCode == 37){
	$('#img-slider').roundabout('animateToPreviousChild');
	e.preventDefault();
	return false;
}
else if(keyCode == 39){
	$('#img-slider').roundabout('animateToNextChild');
	e.preventDefault();
	return false;
}
}
);
	$('.jQ_sliderSwitch li').on('click',function(){
	var $elem = $(this);
	var index = $elem.index();
	$('#img-slider').roundabout('animateToChild',index);
	return false;
}
);
	$('#img-slider').roundabout({
	minScale:0.4,maxScale:0.9,duration:750}
).bind({
	animationEnd:function(e){
	var index = $('#img-slider').roundabout('getChildInFocus');
	$('.jQ_sliderSwitch li').removeClass('active');
	$('.jQ_sliderSwitch li').eq(index).addClass('active');
}
}
);
}
);

CSS代码(style.css):

@charset "utf-8";html,body,div,span,applet,object,iframe,h1,h2,h3,h4,h5,h6,p,blockquote,pre,a,abbr,acronym,address,big,cite,code,del,dfn,em,font,img,ins,kbd,q,s,samp,small,strike,strong,sub,sup,tt,var,dl,dt,dd,ol,ul,li,fieldset,form,label,legend,table,caption,tbody,tfoot,thead,tr,th,td{margin:0;padding:0;border:0;outline:0;font-weight:inherit;font-style:inherit;font-size:100%;font-family:inherit;vertical-align:baseline;}
:focus{outline:0;}
body{line-height:1;color:black;background:white;}
ol,ul{list-style:none;}
table{border-collapse:separate;border-spacing:0;}
caption,th,td{text-align:left;font-weight:normal;}
blockquote:before,blockquote:after,q:before,q:after{content:"";}
blockquote,q{quotes:"" "";}
/* tour */
#tour{z-index:1;position:relative;padding:80px;position:relative;z-index:1;padding-top:0;min-height:500px;background-image:url(pattern.png);background-repeat:repeat-x;background-position:center bottom;margin-top:-50px;padding-top:80px;}
#img-slider .slide{width:100%;background:#fff;position:absolute;}
#img-slider .slide .img{margin:10px auto;border:none;}
#img-slider .img{-webkit-border-radius:5px;-moz-border-radius:5px;-ms-border-radius:5px;border-radius:5px;-webkit-border-radius:5px;-moz-border-radius:5px;-ms-border-radius:5px;border-radius:5px;-webkit-box-shadow:0 1px 0 rgba(204,205,206,5);-moz-box-shadow:0 1px 0 rgba(204,205,206,5);-ms-box-shadow:0 1px 0 rgba(204,205,206,5);box-shadow:0 1px 0 rgba(204,205,206,5);border:1px solid #edeeee;background-color:#fff;width:780px;height:500px;position:relative;}
#img-slider .img img{display:block;width:100%;}
#img-slider .img .label{-webkit-border-radius:0 0 4px 4px;-moz-border-radius:0 0 4px 4px;-ms-border-radius:0 0 4px 4px;border-radius:0 0 4px 4px;-webkit-border-radius:0 0 4px 4px;-moz-border-radius:0 0 4px 4px;-ms-border-radius:0 0 4px 4px;border-radius:0 0 4px 4px;background:#10af8b;padding:2.5% 0;position:absolute;bottom:0;left:0;right:0;font-weight:400;text-align:center;color:#fff;font-size:150%;}
#img-slider .img:first-child{display:block;}
.switcher-wrap{position:relative;padding-bottom:60px;padding-left:80px;padding-right:80px;}
.switcher-wrap.slider{padding-left:380px;padding-right:380px;}
.switcher-wrap.slider #img-slider .img{-webkit-box-shadow:0 4px 20px rgba(0,0,0,0.4);-moz-box-shadow:0 4px 20px rgba(0,0,0,0.4);-ms-box-shadow:0 4px 20px rgba(0,0,0,0.4);box-shadow:0 4px 20px rgba(0,0,0,0.4);border-color:#fff;}
.switcher-wrap a.next,.switcher-wrap a.prev{-webkit-border-radius:100%;-moz-border-radius:100%;-ms-border-radius:100%;border-radius:100%;-webkit-border-radius:100%;-moz-border-radius:100%;-ms-border-radius:100%;border-radius:100%;position:absolute;width:50px;height:50px;top:50%;margin-top:-25px;bottom:0;left:0;background:url(sprites.png) no-repeat 16px 12px;z-index:1000;-webkit-transition:background-color 300ms linear;-moz-transition:background-color 300ms linear;-o-transition:background-color 300ms linear;-ms-transition:background-color 300ms linear;transition:background-color 300ms linear;}
.switcher-wrap a.next:hover,.switcher-wrap a.prev:hover{background-color:rgba(16,175,139,0.1);}
.switcher-wrap a.prev{right:0;left:auto;background-position:-63px 12px;}
.switcher-wrap ul.switcher{text-align:center;position:absolute;left:0;right:0;bottom:0;}
.switcher-wrap ul.switcher li{display:inline-block;padding:2px;border:1px solid #10af8b;border-radius:100%;margin:0 4px;}
.switcher-wrap ul.switcher li a{display:block;width:14px;height:14px;-webkit-border-radius:100%;-moz-border-radius:100%;-ms-border-radius:100%;border-radius:100%;-webkit-border-radius:100%;-moz-border-radius:100%;-ms-border-radius:100%;border-radius:100%;-o-transition:background 0.30s ease-in-out;-webkit-transition:background 0.30s ease-in-out;-moz-transition:background 0.30s ease-in-out;transition:background 0.30s ease-in-out;}
.switcher-wrap ul.switcher li a:hover,.switcher-wrap ul.switcher li.active a{background:#10af8b;}
.switcher-wrap ul.switcher li:last-child{margin-right:0;}

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