JQuery plug-in slicebox implements the special effect of 3D Animated Image carousel Switching

JQuery plug-in slicebox implements the special effect of 3D Animated Image carousel Switching

Beautiful jQuery 3D animation image carousel switching special effect plug-in jquery. slicebox. js, based on jQuery, the plug-in uses CSS 3D animation effects, supports Event Callback calling, and supports parameter custom configuration, such as: speed: 600 switching speed, autoplay: true, whether to play automatically, in terms of browser compatibility, the browser needs to support CSS 3 to transform the deformation attributes. If not, 3D effects will not be visible. We recommend that you learn the code.

Usage:

1. Load 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. The HTML header must use the HTML5 header. <! 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> </Li> <Li> </Li> <Li> </Li> </Ul> <Div> <Span onclick = "$ slicebox. previous ();"> previous page </span> <Span onclick = "$ slicebox. next ();"> next page </span> <Span onclick = "$ slicebox. jump (4);"> page jump </span> </Div>

3. function call

1 2 3 4 5 6 7 8 9 10 11 12 13 14 15 16 17 18

<Script type = "text/javascript"> Var $ slicebox; $ (function (){ $ Slicebox = $ ('# sb-slider'). slicebox ({ Interval: 6000, 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 view the effect by changing its value CuboidsCount: 5, // number of blocks to be cut horizontally or vertically on the slide. Each part is switched in 3D format. CuboidsRandom: true, // whether the value of the cuboidsCount parameter is random MaxCuboidsCount: 5, // set a value to specify the maximum cuboidsCount Value ColorHiddenSides: "#333", // the color of the hidden slide SequentialFactor: 150, // slide switching time (milliseconds) Speed: 600, // The speed of each 3D cube Autoplay: true, // whether to automatically start switching 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 view the effect by changing its value
CuboidsCount: 5, // number of blocks to be cut horizontally or vertically on the slide. Each part is switched in 3D format.
CuboidsRandom: true, // whether the value of the cuboidsCount parameter is random
MaxCuboidsCount: 5, // set a value to specify the maximum cuboidsCount Value
ColorHiddenSides: "#333", // the color of the hidden slide
SequentialFactor: 150, // slide switching time (milliseconds)
Speed: 600, // The speed of each 3D cube
Autoplay: true, // whether to automatically start switching