jQuery带前后按钮旋转木马特效代码

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

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

以下是 jQuery带前后按钮旋转木马特效代码的示例演示效果:

当前平台(PC电脑)

平台:

整屏预览

部分效果截图:

HTML代码(index.html):

<!doctype html>
<html lang="zh">
<head>
<meta charset="UTF-8">
<meta http-equiv="X-UA-Compatible" content="IE=edge,chrome=1"> 
<meta name="viewport" content="width=device-width, initial-scale=1.0">
<title>jQuery带前后按钮旋转木马特效</title>
<link rel="stylesheet" type="text/css" href="css/htmleaf-demo.css">
<link rel="stylesheet" type="text/css" href="css/style.css">
</head>
<body>
<div class="htmleaf-container">
	<div id="carousel">
		<div id="container" tcc-rotation="0">
			<item><img src="img/an_endless_road_with_mountains_in_the_distance.jpg"></item>
			<item><img src="img/large_mountains_3d_model_5d4f26d6-0ea9-48f5-b187-db8bb6093155.jpg"></item>
			<item><img src="img/misty-8211.jpg"></item>
			<item><img src="img/mountain-photos-photography-inspiration-nature-scenes-006.jpg"></item>
			<item><img src="img/santa-monica-mountains-x.jpg"></item>
			<item><img src="img/tumblr_n2968t23b51qzzf87o1_500.jpg"></item>
		</div>
		
		<nav class="tc-btn-container">
			<div class="tc-next">NEXT</div>
			<div class="tc-prev">PREV</div>
		</nav>
		
	</div>
</div>
<script src="js/jquery-2.1.1.min.js" type="text/javascript"></script>
<script src="js/main.js"></script>
</body>
</html>

JS代码(main.js):

$(document).ready(function($){
	var crotation;
	var rotateto = 0;
	var itemCount = $('item').length;
	// count of items in corousel var tcItemInitialRotation = 360/itemCount;
	var tcZDistance = 200;
	$('item').each( function(index){
	$(this).css({
	'transform':'rotateY('+( tcItemInitialRotation * index )+'deg) translateZ('+tcZDistance+'px)'}
).attr('tc-rotation',( tcItemInitialRotation * index ) );
}
);
	function tcRotate(tcdeg){
	$('#container').css({
	'transform':'rotateY('+ tcdeg +'deg)','-ms-transform':'rotateY('+ tcdeg +'deg)','-webkit-transform':'rotateY('+ tcdeg +'deg)'}
);
}
$('item').on('click',function(){
	crotation = $('#container').attr('tcc-rotation');
	var rotation = $(this).attr('tc-rotation');
	rotateto = crotation - rotation;
	tcRotate(rotateto);
	crotation = rotateto;
}
);
	$('.tc-next').on('click',function(){
	rotateto -= tcItemInitialRotation;
	tcRotate(rotateto);
}
);
	$('.tc-prev').on('click',function(){
	rotateto += tcItemInitialRotation;
	tcRotate(rotateto);
}
);
}
);

CSS代码(style.css):

#carousel{display:block;height:auto;margin:0 auto;-webkit-perspective:1200px;perspective:1200px;position:relative;top:200px;width:1200px;}
#container{display:block;height:200px;margin:0 auto;-webkit-transform:rotateY(0deg);-ms-transform:rotateY(0deg);-o-transform:rotateY(0deg);transform:rotateY(0deg);-webkit-transform-origin:center bottom 0;transform-origin:center bottom 0;-webkit-transform-style:preserve-3d;transform-style:preserve-3d;-webkit-transition:all 1s ease-in-out;transition:all 1s ease-in-out;width:200px;z-index:1000;}
item{display:block;margin:0;padding:0;width:200px;-webkit-transform:translateZ(400px);-ms-transform:translateZ(400px);-o-transform:translateZ(400px);transform:translateZ(400px);position:absolute;}
item img{width:100%;}
.tc-btn-container{display:block;float:left;height:35px;margin-top:-12.5px;position:absolute;top:50%;width:100%;}
.tc-next{background-color:#333;color:white;display:block;float:right;font-size:12px;padding:10px;width:auto;cursor:pointer;}
.tc-prev{background-color:#333;color:white;display:block;float:left;font-size:12px;padding:10px;width:auto;cursor:pointer;}

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