jquery Plugin Slicebox implement 3D animation picture Carousel Switch Effect

Beautiful jquery 3D animated picture carousel Switch Effect plugin jquery.slicebox.js, based on jquery, plug-ins using CSS 3D animation effect, support event callback call, support parameter customization configuration, such as: speed:600 switch speed, Autoplay:true whether the automatic playback, in the browser compatibility, the browser needs to support CSS3 transform deformation properties, unsupported will not see 3D special effects, recommended to learn the next code.

How to use:

1. Loading plug-ins and jquery

1 2 3 4

<link type= "Text/css" rel= "stylesheet" href= "Css/slicebox.css"/> "<script type=" Text/javascript "src=" js/ Modernizr.js "></script> <script type=" Text/javascript "src=" Js/jquery8.js "></script> < Script type= "Text/javascript" src= "Js/jquery.slicebox.js" ></script>

2.HTML content, HTML head needs to adopt HTML5 head <! DOCTYPE html>

1 2 3 4 5 6 7 8 9 10 11 12 13 14 15 16 17 18 19 20 21-22

<ul id= "Sb-slider" class= "Sb-slider" > <li> </li> <li > </li> <li> & lt;/li> <li> </li> <li> </li> </ul> <div> <span onclick= "$slicebox. Previous ();" > prev </span> <span onclick= "$slicebox. Next ();" > Next </span> <span onclick= "$slicebox. Jump (4);" > Jump page </span> </div>

3. Function call

<script type= "Text/javascript" > var $slicebox; $ (function () {$slicebox = $ (' #sb-slider '). Slicebox ({interval:6000, orientation: "R",///= Slide direction, preferable (v) Vertical direction, (h) Horizontal direction O R (r) random direction perspective:800,//Perspective point distance, you can change its value to see the effect of cuboidscount:5,//slide horizontal or vertical cut block number, cutting each piece will be in the form of a different shape switch cuboidsrandom:true ,//Whether random cuboidscount the value of the parameter maxcuboidscount:5,//Set a value to specify the maximum Cuboidscount value colorhiddensides: "#333",///hidden slide color Seque ntialfactor:150,//Slide switching time (milliseconds) speed:600,//3D cubic speed autoplay:true,//whether automatically start switching onbeforechange:function (positio N) {return false;}, onafterchange:function (position) {return false;}}); }); </script>

1 2 3 4 5 6 7 8 9 a

Parameter Description:
Orientation: "R",//indicates the slide direction, preferable (v) Vertical direction, (h) Horizontal direction or (r) random direction
perspective:800,//Pivot point distance, you can view the effect by changing its value
Cuboidscount:5,//slides the number of horizontal or vertical cut blocks, each piece of cutting will be in the form of a change in the shape of the
Cuboidsrandom:true,//whether the value of random cuboidscount parameters
Maxcuboidsco Unt:5,//Set a value to specify the maximum Cuboidscount value
Colorhiddensides: "#333",///hidden slide color
sequentialfactor:150,//Slide transition time (ms Number)
speed:600,//per 3D cubic speed
Autoplay:true,//whether to automatically start switching