The jQuery plug-in slicebox implements 3D animated picture carousel switching effects_jquery

Beautiful jQuery 3D animated picture carousel switching special effects plug-in jquery.slicebox.js, based on jQuery, the plug-in uses CSS 3D animation effects, supports event Callback calls, and supports parameter customization, such as: speed: 600 switching speed, autoplay: true Whether to automatically play or not, in terms of browser compatibility, the browser needs to support the CSS3 transformation attribute. If it does not support it, you will not be able to see the 3D special effects. It is recommended to learn the code.

Usage:

1. Load 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 header needs to use HTML5 header

<ul id="sb-slider" class="sb-slider"> 
 <li> 
<img src="images/1.jpg" alt="The jQuery plug-in slicebox implements 3D animated picture carousel switching effects_jquery"/> 
</li> 
<li> 
<img src="images/2.jpg" alt="image2"/> 
</li> 
<li> 
<img src="images/3.jpg" alt="image2"/> 
</li> 
<li> 
<img src="images/4.jpg" alt="image2"/> 
</li> 
<li> 
<img src="images/5.jpg" alt="image2"/> 
</li> 
</ul> 
<div> 
<span onclick="$slicebox.previous();">上一页</span> 
<span onclick="$slicebox.next();">下一页</span> 
<span onclick="$slicebox.jump(4);">跳页</span> 
</div> 

3. Function call

<script type="text/javascript"> 
var $slicebox; $(function() { 
  $slicebox = $('#sb-slider').slicebox({ 
    interval:6000, 
    orientation : "r", //表示幻灯片的切换方向，可取 (v)垂直方向, (h)水平方向 or (r)随机方向 
    perspective : 800, //透视点距离，可以通过改变其值查看效果 
    cuboidsCount : 5, //幻灯片横向或纵向被切割的块数，切割的每一块将会以3D的形式切换 
    cuboidsRandom : true, //是否随机 cuboidsCount 参数的值 
    maxCuboidsCount : 5, //设置一个值用来规定最大的 cuboidsCount 值 
    colorHiddenSides : "#333", //隐藏的幻灯片的颜色 
    sequentialFactor : 150, //幻灯片切换时间（毫秒数） 
    speed : 600, //每一块3D立方体的速度 
    autoplay : true, //是否自动开始切换 
    onBeforeChange : function(position) { return false; }, 
    onAfterChange : function(position) { return false; } 
  }); 
}); 
</script>  

Parameter description:
orientation: "r", //Indicates the switching direction of the slide, which can be (v) vertical direction, (h) horizontal direction or (r) random direction
perspective: 800, //Perspective point distance, you can check the effect by changing its value
cuboidsCount: 5, //The number of blocks that the slide is cut horizontally or vertically. Each piece cut will be switched in 3D form
cuboidsRandom: true, //Whether the value of the cuboidsCount parameter is random
maxCuboidsCount: 5, //Set a value to specify the maximum cuboidsCount value
colorHiddenSides : "#333", //Color of hidden slides
sequentialFactor: 150, //Slide switching time (milliseconds)
speed: 600, //The speed of each 3D cube
autoplay: true, //Whether to automatically start switching

Demo demo Script download

The above is the entire content of this article, I hope you all like it.