<!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>网友Null分享3D旋转图片立体展示jquery幻灯片插件</title>
<meta name="Keywords" content="网友Null分享3D旋转图片立体展示jquery幻灯片插件,Jquery插件,Jquery原创,Jquery资源,Jquery特效,js特效,div+css,JquerySchool" />
<meta name="description" content="JquerySchool是一个专门分享jquery资源、jquery插件、jquery特效的一个网站,完全开放源代码,把实际开发中应用最多、最实用的Jquery资源抽取出来再加以精心编排,让广大网友能以最短的时间、花最少的精力去真正掌握jQuery开发的知识。" />
<style type="text/css">
* {
margin:0;
padding:0;
list-style-type:none;
}
a, img {
border:0;
}
body {
font:12px/180% Tahoma, Geneva, sans-serif;
}
/* Carousel */
#carousel1 {
width:960px;
height:400px;
overflow:hidden;
position:relative;
border-bottom:solid 1px #d8d9da;
margin:0 auto;
}
#carousel1 img {
border:none;
width:240px;
height:180px;
border:solid 1px #000;
}
#carousel1 #title-text {
font-size:22px;
margin:10px 20px 0 0;
padding:0;
text-align:right;
}
#carousel1 #alt-text {
font-size:14px;
margin:5px 20px 0 0;
padding:0;
text-align:right;
}
#carousel1 #user-c {
padding:0;
position:absolute;
right:15px;
bottom:10px;
}
#carousel1 .carouselLeft, #carousel1 .carouselRight {
position:absolute;
bottom:20px;
width:29px;
height:30px;
overflow:hidden;
cursor:pointer;
}
#carousel1 .carouselLeft {
right:60px;
background:url(images/templatemo_slider_right.png) no-repeat;
}
#carousel1 .carouselRight {
right:808px;
background:url(images/templatemo_slider_left.png) no-repeat;
}
</style>
<script type="text/javascript" src="js/jquery.js"></script>
<script type="text/JavaScript" src="js/CloudCarousel.1.0.5.js"></script>
<script type="text/JavaScript" src="js/jquery.mousewheel.js"></script><!--鼠标滚动插件-->
<script type="text/javascript">
$(document).ready(function(){
// 这初始化容器中指定的元素，在这种情况下，旋转木马.
$("#carousel1").CloudCarousel({
xPos:450,
yPos:110,
buttonLeft: $('#but1'),
buttonRight: $('#but2'),
altBox: $("#alt-text"),
titleBox: $("#title-text"),
FPS:30,
reflHeight:86,
reflGap:2,
yRadius:40,
autoRotateDelay: 1200,
speed:0.2,
mouseWheel:true,
bringToFront:true
});
});
</script>
</head>
<body>
<div id="carousel1">
<p id="title-text"></p>
<p id="alt-text"></p>
<a target="_parent" ><img class="cloudcarousel" src="images/01.jpg"/></a>
<a target="_parent" ><img class="cloudcarousel" src="images/02.jpg"/></a>
<a target="_parent" ><img class="cloudcarousel" src="images/03.jpg"/></a>
<a target="_parent" ><img class="cloudcarousel" src="images/04.jpg"/></a>
<a target="_parent" ><img class="cloudcarousel" src="images/05.jpg"/></a>
<a target="_parent" ><img class="cloudcarousel" src="images/06.jpg"/></a>
<a target="_parent" ><img class="cloudcarousel" src="images/07.jpg"/></a>
<a target="_parent" ><img class="cloudcarousel" src="images/08.jpg"/></a>
<div id="but1" class="carouselLeft"></div>
<div id="but2" class="carouselRight"></div>
</div>
</body>
</html>
jquery实现的3D旋转图片立体展示幻灯片插件
5星 · 超过95%的资源 需积分: 50 131 浏览量
2013-05-25
15:31:01
上传
评论
收藏 308KB ZIP 举报 
jquery实现的3D旋转图片立体展示幻灯片插件.zip （15个子文件） 
3d旋转相册 images 
01.jpg 25KB 05.jpg 18KB
templatemo_slider_left.png 385B 07.jpg 14KB 04.jpg 19KB templatemo_slider_right.png 406B 08.jpg 15KB
Thumbs.db 174KB 03.jpg 18KB 06.jpg 22KB 02.jpg 18KB js jquery.js 83KB jquery.mousewheel.js 1KB CloudCarousel.1.0.5.js 12KB
demo.html 3KB资源评论
轩辕宏2013-06-07很不错的例子，是我想要的效果，谢谢开放平台的支持。
syrythun2014-03-10资源不错，可惜不是我要找的那种。
slsph5232013-10-04这就是想要的，收下看下如何实现的.希望以后也能自己写出来。。
