jQuery的slicebox插件实现3D翻转轮播效果
2017-04-01 14:57
826 查看
最近做项目，banner要实现立体的翻转效果，通过搜索，发现了jQuery的一款插件，能够很好的实现该效果，这里就记录一下。
效果图如下：
使用方法：
1. 在html中引入必要的js和css文件：
2. css：
3. js
jquery.slicebox.js文件可以在这里下载: http://www.codeforge.cn/read/251779/jquery.slicebox.js__html
4. 最后调用即可:
5. 有一些参数，可以根据自己的需要进行设置：
orientation:’v’ —— 表示幻灯片的切换方向，可取 (v)垂直方向, (h)水平方向 or (r)随机方向；
perspective:1200 —— 透视点距离；
cuboidsCount:3 —— 幻灯片横向或纵向被切割的块数，切割的每一块将会以3D的形式切换；
cuboidsRandom : false —— 是否随机 cuboidsCount 参数的值；
maxCuboidsCount : 5 —— 设置一个值用来规定最大的 cuboidsCount 值；
colorHiddenSides : ‘#222′ —— 隐藏的幻灯片的颜色；
sequentialFactor : 150 —— 幻灯片切换时间（毫秒数）；
speed : 600 —— 每一块3D立方体的速度；
autoplay : false —— 是否自动开始切换。
效果图如下：
使用方法：
1. 在html中引入必要的js和css文件：
<!DOCTYPE html> <html lang="en"> <head> <title>Slicebox - 3D Image Slider</title> <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"> <link rel="stylesheet" type="text/css" href="css/slicebox.css" /> <script type="text/javascript" src="js/modernizr.custom.js"></script> </head> <body> <div class="container"> <div class="wrapper"> <ul id="sb-slider" class="sb-slider"> <li> <a href=""><img src="images/1.jpg" alt="image1"/></a> <div class="sb-description"> <h3>Creative Lifesaver</h3> </div> </li> <li> <a href=""><img src="images/2.jpg" alt="image2"/></a> <div class="sb-description"> <h3>Honest Entertainer</h3> </div> </li> <li> <a href=""><img src="images/3.jpg" alt="image1"/></a> <div class="sb-description"> <h3>Brave Astronaut</h3> </div> </li> <li> <a href=""><img src="images/4.jpg" alt="image1"/></a> <div class="sb-description"> <h3>Affectionate Decision Maker</h3> </div> </li> </ul> <!--图片阴影--> <div id="shadow" class="shadow"></div> <!--前后按钮--> <div id="nav-arrows" class="nav-arrows"> <a href="#">Next</a> <a href="#">Previous</a> </div> <!--底部小按钮--> <div id="nav-dots" class="nav-dots"> <span class="nav-dot-current"></span> <span></span> <span></span> <span></span> </div> </div> <!-- /wrapper --> </div> <script src="./js/jquery-1.11.3.min.js"></script> <script src="./js/jquery.slicebox.js"></script> </body> </html>
2. css：
/*公共样式 可不要*/
*,
*:after,
*:before {
-webkit-box-sizing: border-box;
-moz-box-sizing: border-box;
box-sizing: border-box;
padding: 0;
margin: 0;
}
/* Clearfix hack by Nicolas Gallagher: http://nicolasgallagher.com/micro-clearfix-hack/ */
.clearfix:after {
content: "";
display: table;
clear: both;
}
/* General Demo Style */
body {
color: #444;
font-family: "PT Sans Narrow", Arial, sans-serif;
font-size: 13px;
font-weight: 400;
-webkit-font-smoothing: antialiased;
overflow-x: hidden;
min-width: 320px;
}
a {
color: #000;
text-decoration: none;
}
h1, h2, h5 {
margin: 20px 20px 30px 20px;
font-size: 56px;
color: #fff;
font-family: "Volkhov", serif;
text-align: center;
font-weight: 700;
text-shadow: 1px 1px 3px #e0d1bc;
}
h1 span, h5 {
font-size: 18px;
display: block;
font-style: italic;
color: #997f5a;
font-weight: 400;
text-shadow: 0px 1px 1px #fff;
}
.wrapper {
position: relative;
max-width: 840px;
width: 100%;
padding: 0 50px;
margin: 0 auto;
}
/* Slicebox Style */
.sb-slider {
margin: 10px auto;
position: relative;
overflow: hidden;
width: 100%;
list-style-type: none;
padding: 0;
}
.sb-slider li {
margin: 0;
padding: 0;
display: none;
}
.sb-slider li > a {
outline: none;
}
.sb-slider li > a img {
border: none;
}
.sb-slider img {
max-width: 100%;
display: block;
}
.sb-description {
padding: 20px;
bottom: 10px;
left: 10px;
right: 10px;
z-index: 1000;
position: absolute;
background: #CBBFAE;
background: rgba(190,176,155, 0.4);
border-left: 4px solid rgba(255,255,255,0.7);
-ms-filter:"progid:DXImageTransform.Microsoft.Alpha(Opacity=0)";
filter: alpha(opacity=0);
opacity: 0;
color: #fff;
-webkit-transition: all 200ms;
-moz-transition: all 200ms;
-o-transition: all 200ms;
-ms-transition: all 200ms;
transition: all 200ms;
}
.sb-slider li.sb-current .sb-description {
-ms-filter:"progid:DXImageTransform.Microsoft.Alpha(Opacity=80)";
filter: alpha(opacity=80);
opacity: 1;
}
.sb-slider li.sb-current .sb-description:hover {
-ms-filter:"progid:DXImageTransform.Microsoft.Alpha(Opacity=99)";
filter: alpha(opacity=99);
background: rgba(190,176,155, 0.7);
}
.sb-perspective {
position: relative;
}
.sb-perspective > div {
position: absolute;
-webkit-transform-style: preserve-3d;
-moz-transform-style: preserve-3d;
-o-transform-style: preserve-3d;
-ms-transform-style: preserve-3d;
transform-style: preserve-3d;
-webkit-backface-visibility : hidden;
-moz-backface-visibility : hidden;
-o-backface-visibility : hidden;
-ms-backface-visibility : hidden;
backface-visibility : hidden;
}
.sb-side {
margin: 0;
display: block;
position: absolute;
-moz-backface-visibility : hidden;
-webkit-transform-style: preserve-3d;
-moz-transform-style: preserve-3d;
-o-transform-style: preserve-3d;
-ms-transform-style: preserve-3d;
transform-style: preserve-3d;
}
.shadow {
width: 100%;
height: 168px;
position: relative;
margin-top: -110px;
background: transparent url(../images/shadow.png) no-repeat bottom center;
background-size: 100% 100%; /* stretches it */
z-index: -1;
display: none;
}
.sb-description h3 {
font-size: 20px;
text-shadow: 1px 1px 1px rgba(0,0,0,0.3);
}
.sb-description h3 a {
color: #4a3c27;
text-shadow: 0 1px 1px rgba(255,255,255,0.5);
}
.nav-arrows {
display: none;
}
.nav-arrows a {
width: 42px;
height: 42px;
background: #cbbfae url(../images/nav.png) no-repeat top left;
position: absolute;
top: 50%;
left: 2px;
text-indent: -9000px;
cursor: pointer;
margin-top: -21px;
opacity: 0.9;
border-radius: 50%;
box-shadow: 0 1px 1px rgba(255,255,255,0.8);
}
.nav-arrows a:first-child{
left: auto;
right: 2px;
background-position: top right;
}
.nav-arrows a:hover {
opacity: 1;
}
.nav-dots {
text-align: center;
position: absolute;
bottom: -5px;
height: 30px;
width: 100%;
left: 0;
display: none;
}
.nav-dots span {
display: inline-block;
width: 16px;
height: 16px;
border-radius: 50%;
margin: 3px;
background: #cbbfae;
cursor: pointer;
box-shadow:
0 1px 1px rgba(255,255,255,0.6),
inset 0 1px 1px rgba(0,0,0,0.1);
}
.nav-dots span.nav-dot-current {
box-shadow:
0 1px 1px rgba(255,255,255,0.6),
inset 0 1px 1px rgba(0,0,0,0.1),
inset 0 0 0 3px #cbbfae,
inset 0 0 0 8px #fff;
}
.nav-options {
width: 70px;
height: 30px;
position: absolute;
right: 70px;
bottom: 0px;
display: none;
}
.nav-options span {
width: 30px;
height: 30px;
background: #cbbfae url(../images/options.png) no-repeat top left;
text-indent: -9000px;
cursor: pointer;
opacity: 0.7;
display: inline-block;
border-radius: 50%;
}
.nav-options span:first-child{
background-position: -30px 0px;
margin-right: 3px;
}
.nav-options span:hover {
opacity: 1;
}3. js
jquery.slicebox.js文件可以在这里下载: http://www.codeforge.cn/read/251779/jquery.slicebox.js__html
4. 最后调用即可:
$(function() {
var Page = (function() {
var $navArrows = $( '#nav-arrows' ).hide(),
$navDots = $( '#nav-dots' ).hide(),
$nav = $navDots.children( 'span' ),
$shadow = $( '#shadow' ).hide(),
slicebox = $( '#sb-slider' ).slicebox( {
onReady : function() {
$navArrows.show();
$navDots.show();
$shadow.show();
},
onBeforeChange : function( pos ) {
$nav.removeClass( 'nav-dot-current' );
$nav.eq( pos ).addClass( 'nav-dot-current' );
}
}),
init = function() {
initEvents();
},
initEvents = function() {
// add navigation events
$navArrows.children( ':first' ).on( 'click', function() {
slicebox.next();
return false;
});
$navArrows.children( ':last' ).on( 'click', function() {
slicebox.previous();
return false;
});
$nav.each( function( i ) {
$( this ).on( 'click', function( event ) {
var $dot = $( this );
if( !slicebox.isActive() ) {
$nav.removeClass( 'nav-dot-current' );
$dot.addClass( 'nav-dot-current' );
}
slicebox.jump( i + 1 );
return false;
});
});
};
return { init : init };
})();
Page.init();
});5. 有一些参数，可以根据自己的需要进行设置：
orientation:’v’ —— 表示幻灯片的切换方向，可取 (v)垂直方向, (h)水平方向 or (r)随机方向；
perspective:1200 —— 透视点距离；
cuboidsCount:3 —— 幻灯片横向或纵向被切割的块数，切割的每一块将会以3D的形式切换；
cuboidsRandom : false —— 是否随机 cuboidsCount 参数的值；
maxCuboidsCount : 5 —— 设置一个值用来规定最大的 cuboidsCount 值；
colorHiddenSides : ‘#222′ —— 隐藏的幻灯片的颜色；
sequentialFactor : 150 —— 幻灯片切换时间（毫秒数）；
speed : 600 —— 每一块3D立方体的速度；
autoplay : false —— 是否自动开始切换。
内容来自用户分享和网络整理，不保证内容的准确性，如有侵权内容，可联系管理员处理 
相关文章推荐
- jQuery插件slicebox实现3D动画图片轮播切换特效
- 超链接 鼠标滑过超链接3D翻转效果，括号动画效果 jQuery插件
- JQuery实现的图文自动轮播效果插件
- jQuery实现图片轮播效果代码(基于jquery.pack.js插件)
- JQuery实现的图文自动轮播效果插件
- jQuery插件Flexslider实现图片轮播、图文结合滑动切换效果
- jQuery插件FusionCharts实现的3D柱状图效果实例【附demo源码下载】
- jQuery插件Flexslider实现图片轮播、图文结合滑动切换效果
- jQuery实现轮播效果(二) - 插件实现
- jquery.roundabout.js图片叠加3D旋转插件多功能图片翻转切换效果
- 使用HTML5和jQuery插件Reel实现一个超酷的星际争霸2兵种动画360度预览效果
- jQuery3D全景效果展示插件
- 【jQuery插件】Masked Input Plugin实现文本框掩码效果
- 使用HTML5和jQuery插件Quicksand实现一个超酷的星际争霸2兵种分类展示效果
- 采用Jquery无刷新分页插件jquery.pagination.js 实现无刷新分页效果
- jQuery插件实现模拟dialogs效果实例（图片）
- jquery插件ui中tabs实现选择面板效果
- 分享20个最新jQuery技术实现的绚丽效果插件
- 基于JQuery的实现图片轮播效果(焦点图)
- JQuery实现图片轮播效果