jquery Plugin Slider Revolution implement response animation sliding picture switching effect

Slider Revolution Plug-in is a very powerful plug-in, we can use it to produce a variety of effects and also support mobile devices, mobile phone to support the touch, keyboard paging, and its built-in slide, video playback timer and so on, specifically we look.

This is a very powerful content switching plugin, it is based on jquery, it is fully responsive, support mobile devices, support mobile phone touch, keyboard page, it has built-in slide, video playback timer, it has a variety of modes: custom, automatic response, full screen; it has a variety of animation effects, 3d effect ... In short you think of the effect it has done, its name is called Slider Revolution.

Html

Slider Revolution is a jquery based plug-in that needs to be loaded into the jquery library file and Slider Revolution dependent CSS and JS files.

?

1 2 3 4

<script src= "Js/jquery.js" ></script> <link rel= "stylesheet" href= "css/style.css" media= "screen"/> <script src= "Rs-plugin/js/jquery.themepunch.plugins.min.js" ></script> <script src= "rs-plugin/js/" Jquery.themepunch.revolution.min.js "></script>

The main HTML structure for content switching is as follows, consisting of multiple Div.tp-banner

• Label
• the contents of the switch, including the main picture, text, button information. This information is matched with the respective data-attributes to allow the slider revolution to be identified.

  ?

  1 2 3 4 5 6 7 8 9 10 11 12 13 14 15 16 17 18 19 20 21 22 The

  <div class=", "Tp-banner-contain" Er "> <div class=" Tp-banner "> <ul> <!--SLIDE--> <li data-transition=" Fade "data-slotamount=" 7 " data-masterspeed= "1500" > <!--MAIN IMAGE--> <!--LAYERS--> <!--LAYER NR. 1--> <div class= "tp-caption lightgrey_divider skewfromrightshort fadeout" data-x= "data-y=" 224 "data-speed=" data-start= "1200" data-easing= "Power4.easeout" >my Caption </div> ...   </li> <li data-transition= "Zoomout" data-slotamount= "7" data-masterspeed= "1000" > <!--MAIN IMAGE--> <!--LAYERS--> <!--LAYER NR. 1--> <div class= "tp-caption lightgrey_divider skewfromrightshort fadeout" data-x= "data-y=" 224 "data-speed=" data-start= "1200" data-easing= "Power4.easeout" >my Caption </div> ... </li> ... </ul> </ div> </div>

  jquery Call

  After the HTML structure is decorated, you can call the slider Revolution plug-in, paste the above code, open the browser can see the switch effect.

  ?

  1 2 3 4 5 6 7 8 9

  $ (function () {$ ('. Tp-banner '). Revolution ({delay:9000, startwidth:1170, startheight:500, hidethumbs:10});

  Option settings and descriptions

  Slider Revolution provides a number of parameter option settings:

  Delay: Slide content stay time. Default 9000 milliseconds

  Startheight: Sliding content height, default 490 pixels.

  Startwidth: Slide content width, default 890 pixels.

  Navigationtype: Displays the page-flipping icon, the default "bullet" (dot), if set to None, not displayed ...

  Navigationarrows: Displays the page-turn arrow, the default Nexttobullets, that is, when the mouse is sliding, the left and right page arrows are displayed, if none is displayed.

  Touchenabled: Allow touch to slide, default on is allowed, if set to off is not allowed.

  Onhoverstop: Pause when mouse cursor is turned on: Open, off: close.

  Fullwidth: Open full-screen Display picture content, on: Open, off: close.

  For each

• labels can set various effects:

   

  Data-transition: Content sliding effect, you can set the following values: Boxslide,boxfade,slotzoom-horizontal, Slotslide-horizontal,slotfade-horizontal,slotzoom-vertical,slotslide-vertical,slotfade-vertical,curtain-1, Curtain-2,curtain-3,slideleft,slideright,slideup,slidedown,fade

  Data-slotamount: The number of square blocks that are partitioned when switching.

  Data-link: Picture link

  Data-delay: Setting the time to stay in the current slider

  For each element in Li, you can set the following options to achieve a variety of effects.

  Animation style, Class Property: The Class Property value represents a different animation style: Sft-short from top sfb-short to Bottom,sfr-short from Right,sfl-short From Left,lft-long to Top,lfb-long from Bottom,lfr-long to Right,lfl-long from left,fade-fading

  Dat A-x: Lateral displacement of the current element relative to Li

  data-y: Vertical displacement of the current element relative to Li

  data-speed: Animation time, milliseconds

  Data-start after: The current element waits a few seconds before it is displayed

  data-easing: Buffering animation, there are easeoutback ... Multiple animation effects, referencing the jquery easing animation effect extension

  In addition, if you want to add a timeline as a timer, you can add the following code at the end of the slider:

  ?

  <div class= "Tp-bannertimer" ></div>

  The above is the entire contents of this article, I hope you can enjoy Huan.