JQuery plug-in Skippr implements focus chart slide effects

JQuery plug-in Skippr implements focus chart slide effects

Best-performing focus chart slides in history: jQuery plug-in Skippr, lightweight plug-in, responsive layout plug-in, powerful parameter Customization

Configuration, which allows you to customize the switching speed, switching mode, whether to display the left and right arrows, whether to play automatically, and automatic playback interval.

Parameters:

1. Load jQuery and plug-ins

1 2 3

<Link rel = "stylesheet" href = "css/jquery.skippr.css"> <Script src = "js/jquery. min. js"> </script> <Script src = "js/jquery. skippr. min. js"> </script>

2. HTML content

1 2 3 4 5 6 7 8 9

<Div id = "container"> <Div id = "theTarget"> <Div style = "background-image: url (img/image1.jpg)"> </div> <Div style = "background-image: url (img/image2.jpg)"> </div> <Div style = "background-image: url (img/image3.jpg)"> </div> <Div style = "background-image: url (img/image4.jpg)"> </div> <Div style = "background-image: url (img/image5.jpg)"> </div> </Div> </Div>

3. function call

 

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

<Script> $ (Document). ready (function (){   $ ("# TheTarget"). skippr ({   Transition: 'slide ', Velocity: 1000, Easing: 'easeoutquart ', NavType: 'block ', ChildrenElementType: 'div ', Arrows: true, AutoPlay: false, AutoPlayDuration: 5000, KeyboardOnAlways: true, HidePrevious: false });   }); </Script>

Parameter configuration explanation

Transition :( fade/slide) Switch Mode

Speed: switching speed (MS)

Easing: easeOutQuart)

NavType: The following navigation type (block/bubble)

Arrows: whether an arrow exists (true/false)

AutoPlay: whether to play automatically (true/false)

AutoPlayDuration: automatic playback interval (MS)

KeyboardOnAlways: whether keyboard switching is supported (true/false)

HidePrevious: Indicates whether to hide the first switched arrow (true/false)