幻灯片/轮播
jQuery+CSS3简单3D旋转木马插件
PetitQ
cubeSlider 是一款非常简单的 jQuery 和 CSS3 3D 旋转木马特效插件。该插件会根据 HTML 结构中 li 元素的数量来创建相应面数的旋转木马。使用上非常简单，效果也十分不错。
使用方法：
使用该旋转木马插件需要引入 jQuery 和 jquery.cubeSlider.js 文件。
也想出现在这里？联系我们吧
<script src="js/jquery-2.1.4.min.js"></script>
<script src="js/jquery.cubeSlider.js"></script>
HTML 结构：
该旋转木马使用无序列表来制作，在每一个<li>元素中放置一个<div>作为显示的面。
<ul class="demo">
<li><div>1</div></li>
<li><div>2</div></li>
<li><div>3</div></li>
<li><div>4</div></li>
</ul>
CSS 样式：
需要为该旋转木马特效添加下面的样式：
* {
margin: 0;
padding: 0;
}.demo > li {
float: left;
list-style-type: none;
position: absolute;
opacity: 0.6;
transition-property: all;
transition-duration: 1s;
transition-timing-function: ease-in-out;
text-align: center;
color: #fff;
font-size: 70px;
cursor: pointer;
}.demo {
width: 100px;
height: 100px;
margin: 100px auto;
-webkit-transform: rotateY(-10deg) rotateX(-20deg);
-webkit-transform-style: preserve-3d;
-webkit-perspective: 400px;
position: relative;
}.demo > li > div {
background: #F44336;
position: absolute;
top: 10px;
right: 10px;
left: 10px;
bottom: 10px;
}
初始化插件：
在页面加载完毕之后，可以通过下面的方法来初始化该旋转木马插件。
$('.demo').polygon(OPTIONS);
配置参数：
该旋转木马插件有三个配置参数。
width：旋转木马的宽度
height：旋转木马的高度
timer：自动播放的时间，设置为 false 表示不自动播放
| 演示地址 | 下载地址 |
专业提供WordPress主题安装、深度汉化、加速优化等各类网站建设服务，详询在线客服！
也想出现在这里？联系我们吧
