jquery Plugin Slicebox implement 3D animation picture Carousel Switch Effect

Source: Internet
Author: User

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

Contact Us

The content source of this page is from Internet, which doesn't represent Alibaba Cloud's opinion; products and services mentioned on that page don't have any relationship with Alibaba Cloud. If the content of the page makes you feel confusing, please write us an email, we will handle the problem within 5 days after receiving your email.

If you find any instances of plagiarism from the community, please send an email to: info-contact@alibabacloud.com and provide relevant evidence. A staff member will contact you within 5 working days.

A Free Trial That Lets You Build Big!

Start building with 50+ products and up to 12 months usage for Elastic Compute Service

  • Sales Support

    1 on 1 presale consultation

  • After-Sales Support

    24/7 Technical Support 6 Free Tickets per Quarter Faster Response

  • Alibaba Cloud offers highly flexible support services tailored to meet your exact needs.