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

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

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

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.