jQuery分层轮播3d旋转切换代码

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

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

以下是 jQuery分层轮播3d旋转切换代码的示例演示效果:

当前平台(PC电脑)

平台:

整屏预览

部分效果截图:

HTML代码(index.html):

<!doctype html>
<html lang="en">
<head>
<meta charset="UTF-8" />
<title>jQuery分层轮播3d旋转切换代码</title>
<link rel="stylesheet" href="css/jquery.zySlide.css">
<style>
	body{ background-color:#2E2E2E}
	.zy-Slide section{ color: #FFFFFF; border-width: 1px; border-style: solid; }
</style>

</head>

<body>
<div id="Slide1" class="zy-Slide">
	<!--prev:元素中的文本通常会保留空格和换行符。而文本也会呈现为等宽字体。-->
	<section>前一张</section>
	<section>后一张</section>
	<ul>
		<!--alt + shift : 可以创建一个矩形选择区域-->
		<li><img src="images/1.jpg" /></li>
		<li><img src="images/2.jpg" /></li>
		<li><img src="images/3.jpg" /></li>
		<li><img src="images/4.jpg" /></li>
		<li><img src="images/5.jpg" /></li>
		<li><img src="images/6.jpg" /></li>
		<li><img src="images/7.jpg" /></li>
	</ul>
</div>
<div id="Slide2" class="zy-Slide">
	<!--prev:元素中的文本通常会保留空格和换行符。而文本也会呈现为等宽字体。-->
	<section>前一张</section>
	<section>后一张</section>
	<ul>
		<!--alt + shift : 可以创建一个矩形选择区域-->
		<li><img src="images/4.jpg" /></li>
		<li><img src="images/5.jpg" /></li>
		<li><img src="images/6.jpg" /></li>
		<li><img src="images/7.jpg" /></li>
		<li><img src="images/1.jpg" /></li>
		<li><img src="images/2.jpg" /></li>
		<li><img src="images/3.jpg" /></li>
	</ul>
</div>

<script src="jquery.min.js"></script>
<script src="jquery.zySlide.js"></script>
<script src="index.js"></script>
</body>
</html>

JS代码(index.js):

$.noConflict()jQuery('.zy-Slide').zySlide({
	speed:500}
).css('border','0px solid blue') // $('#Slide2').zySlide({
	delay:2000,speed:2000}
) // var divs = $('.zy-Slide') // divs.each(function(i,ele){
	// Slide(ele) //}
) // (function (){
	// alert(arguments[0]) //}
) // (function (){
	// alert(1) //}
)

CSS代码(jquery.zySlide.css):

.zy-Slide{font-size:12px;position:relative;width:754px;height:292px;margin:115px auto 0;}
.zy-Slide ul{position:relative;width:754px;height:292px;margin:0;padding:0;}
.zy-Slide li{position:absolute;list-style:none;background:#000;width:0;height:0;top:146px;left:377px;z-index:0;cursor:pointer;border-radius:3px;margin:0;padding:0;}
.zy-Slide li img{width:100%;height:100%;vertical-align:middle;}
.zy-Slide section:nth-child(1),.zy-Slide section:nth-child(2){position:absolute;top:50%;width:39px;height:40px;margin-top:-20px;cursor:pointer;line-height:40px;padding-left:12px;padding-right:12px;}
.zy-Slide section:nth-child(1){left:-60px;}
.zy-Slide section:nth-child(2){right:-60px;}

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