jQuery的slicebox插件实现3D翻转轮播效果
最近做项目，banner要实现立体的翻转效果，通过搜索，发现了jQuery的一款插件，能够很好的实现该效果，这里就记录一下。
效果图如下：
使用方法：
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 —— 是否自动开始切换。
