jquery Plugin Slicebox implement 3D animation picture Carousel Switch Special effects _jquery

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

<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>

<ul id= "Sb-slider" class= "Sb-slider" > 
 <li> 
 
</li> 
<li> 
 
</li> 
<li> 
 
</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 or (r) Random direction Perspect  ive:800,//Perspective point distance, you can change its value to see the effect cuboidscount:5,//slide horizontal or vertical cut block number, each piece of cutting will be in the form of the switch cuboidsrandom:true,//whether random 
    The value of the Cuboidscount parameter maxcuboidscount:5,//Set a value to specify the maximum Cuboidscount value colorhiddensides: "#333",//Hidden slide color sequentialfactor:150,//Slide switching time (milliseconds) speed:600,//3D cubic speed autoplay:true,//whether automatically start switching Onbeforecha 
  Nge:function (position) {return false;}, onafterchange:function (position) {return false;} 
}); 
}); </script> 

Parameter description:
Orientation: "R",//indicates the slide's switching direction, preferable (v) Vertical direction, (h) Horizontal direction or (r) random direction
perspective:800,//Pivot point distance, can view effects by changing its value
Cuboidscount:5,//slides the number of blocks that are cut horizontally or vertically, each piece of cutting will be switched in the form of a single
Cuboidsrandom:true,//whether the value of the random cuboidscount parameter
Maxcuboidscount:5,//Set a value to specify the maximum Cuboidscount value
Colorhiddensides: "#333",//hide the color of the slides
sequentialfactor:150,//Slide transition time (milliseconds)
speed:600,//3D cubic speed per piece
Autoplay:true,//whether to automatically start switching

Demo Demo script download

The above mentioned is the entire content of this article, I hope you can enjoy.