jquery Common plugin Daquan (9) Responsiveslides Plugin

Responsiveslides.js is a lightweight, responsive jquery slide plug-in that shows pictures in the same container (tiny responsive slideshow jquery plugin). It supports almost all browsers, including IE6, and supports the maximum width attribute in IE6, but is not natively supported in other browsers. All you need to do is link jquery and crop the image to the same size.

Tools/Materials

• Laptop or desktop computer
• Internet
• Responsiveslides

Method/Step

2. 1

   Download the responsiveslides.js on GitHub as shown in.

4. 2

   Unzip the Responsiveslides.js-master.zip file, as shown in the project directory.

6. 3

   Create a new project directory, copy the RESPONSIVESLIDES.CSS, Responsiveslides.min.js, respectively, in the new CSS and JS folder.

8. 4

   Introducing Files

   <script src= "Http://ajax.googleapis.com/ajax/libs/jquery/1.8.3/jquery.min.js" ></script>

   <script src= "Responsiveslides.min.js" ></script>

10. 5

    Add HTML tags

    <ul class= "Rslides" >

    <li></li>

    <li></li>

    <li></li>

    </ul>

11. Add CSS

    . rslides {

    position:relative;

    List-style:none;

    Overflow:hidden;

    width:100%;

    padding:0;

    margin:0;

    }

    . rslides Li {

    -webkit-backface-visibility:hidden;

    Position:absolute;

    Display:none;

    width:100%;

    left:0;

    top:0;

    }

    . rslides Li:first-child {

    position:relative;

    Display:block;

    Float:left;

    }

    . rslides img {

    Display:block;

    Height:auto;

    Float:left;

    width:100%;

    border:0;

    }

13. Invoke API

    <script>

    $ (function () {

    $ (". Rslides"). Responsiveslides ();

    });

    </script>

14. API parameters:

    $ (". Rslides"). Responsiveslides ({

    Auto:true,//Boolean: Sets whether to play automatically, true or False

    speed:500,//Integer: Animation duration, per millisecond

    timeout:4000,//Integer: Time between pictures, per millisecond

    Pager:false,//Boolean: Whether the page number is displayed, true or False

    Nav:false,//Boolean: Whether to display the left and right navigation arrows (that is, upside down), true or False

    Random:false,//Boolean: Random slide order, true or False

    Pause:false,//Boolean: Pauses the mouse hover over the slide, true or False

    Pausecontrols:true,//Boolean: Pause on the dashboard, true or False

    Prevtext: "Previous",//String: The display text of the forward button

    Nexttext: "Next",//String: The display text of the rollover button

    MaxWidth: "",//Integer: Maximum width of the slide

    Navcontainer: "",///Selector:where controls should be appended to, default was after the ' UL '

    Manualcontrols: "",///Selector: declaring custom paging navigation

    namespace: "Rslides",//String: Modify the default container name

    Before:function () {},//function: Parameter before callback

    After:function () {}//function: Parameter after callback

16. Browser support:

    Internet Explorer 6,7,8,9

    Firefox 3,6,8,11

    Safari 5,5.1

    Chrome 15,20

    Opera 11,11.6

    IOS Safari

    Symbian 3 Webkit

    Opera Mobile 10.1

    Opera Mini for IOS

    IE7, IE9 Mobile

    Firefox Mobile

    Android 2.3+

    Kindle Browser

18. Characteristics:

    1. Smaller file size (only 792 bytes by reduction and GZ compression)

    2. Simple function (Responsiveslides.js only supports three modes: the picture automatically fades in and uses the page number label, or left and right to manually switch the picture. )

19. Demo.css

    * {

    margin:0;

    padding:0;

    }

    HTML {

    Background: #222 URL ("Images/bg.png") repeat;

    }

    Body {

    _width:70%;

    Color: #888;

    font:14px/20px Helvetica, Arial, Sans-serif;

    margin:20px Auto 0;

    max-width:800px;

    Text-align:center;

    text-shadow:0 -2px 1px #000;

    -webkit-font-smoothing:antialiased;

    }

    H1 {

    font:40px/60px "Helvetica Neue", Helvetica, Arial, Sans-serif;

    Color: #fff;

    font-weight:200;

    }

    H2 {

    font:16px/20px "Helvetica Neue", Helvetica, Arial, Sans-serif;

    margin-bottom:40px;

    }

    #wrapper {

    padding:20px;

    }

    P,h3,h4,pre {

    Text-align:left;

    max-width:540px;

    margin:0 Auto 20px;

    }

    . rslides {

    margin:0 Auto 40px;

    }

    #slider2,

    #slider3 {

    Box-shadow:none;

    -moz-box-shadow:none;

    -webkit-box-shadow:none;

    margin:0 Auto;

    }

    . rslides_tabs {

    List-style:none;

    padding:0;

    Background:rgba (0,0,0,.25);

    box-shadow:0 0 1px rgba (255,255,255,.3), inset 0 0 5px Rgba (0,0,0,1.0);

    -moz-box-shadow:0 0 1px rgba (255,255,255,.3), inset 0 0 5px Rgba (0,0,0,1.0);

    -webkit-box-shadow:0 0 1px rgba (255,255,255,.3), inset 0 0 5px Rgba (0,0,0,1.0);

    font-size:18px;

    List-style:none;

    margin:0 Auto 50px;

    max-width:540px;

    padding:10px 0;

    Text-align:center;

    width:100%;

    }

    . rslides_tabs Li {

    Display:inline;

    Float:none;

    margin-right:1px;

    }

    . rslides_tabs a {

    Width:auto;

    line-height:20px;

    PADDING:9PX 20px;

    Height:auto;

    Background:transparent;

    Display:inline;

    }

    . rslides_tabs Li:first-child {

    margin-left:0;

    }

    . rslides_tabs. Rslides_here a {

    Background:rgba (255,255,255,.1);

    Color: #fff;

    Font-weight:bold;

    }

    A

    Color: #fff;

    Text-decoration:none;

    }

    #download {

    Background: #333;

    Background:rgba (255,255,255,.1);

    border:1px solid Rgba (255,255,255,.1);

    border-radius:5px;

    -moz-border-radius:5px;

    -webkit-border-radius:5px;

    Display:block;

    font-size:20px;

    Font-weight:bold;

    margin:60px Auto;

    max-width:500px;

    padding:20px;

    }

    #download: hover {

    Background:rgba (255,255,255,.15);

    }

    . footer {

    font-size:11px;

    }

    /* Callback Example */

    h3 {

    font:20px/30px "Helvetica Neue", Helvetica, Arial, Sans-serif;

    Text-align:center;

    Color: #fff;

    }

    . events {

    List-style:none;

    }

    . callbacks_container {

    margin-bottom:50px;

    position:relative;

    Float:left;

    width:100%;

    }

    . callbacks {

    position:relative;

    List-style:none;

    Overflow:hidden;

    width:100%;

    padding:0;

    margin:0;

    }

    . callbacks Li {

    Position:absolute;

    width:100%;

    left:0;

    top:0;

    }

    . callbacks img {

    Display:block;

    position:relative;

    Z-index:1;

    Height:auto;

    width:100%;

    border:0;

    }

    . Callbacks. Caption {

    Display:block;

    Position:absolute;

    Z-index:2;

    font-size:20px;

    Text-shadow:none;

    Color: #fff;

    Background: #000;

    Background:rgba (0,0,0,. 8);

    left:0;

    right:0;

    bottom:0;

    padding:10px 20px;

    margin:0;

    Max-width:none;

    }

    . callbacks_nav {

    Position:absolute;

    -webkit-tap-highlight-color:rgba (0,0,0,0);

    top:52%;

    left:0;

    opacity:0.7;

    Z-index:3;

    Text-indent: -9999px;

    Overflow:hidden;

    Text-decoration:none;

    height:61px;

    width:38px;

    Background:transparent URL ("Themes/themes.gif") no-repeat left top;

    Margin-top: -45px;

    }

    . callbacks_nav:active {

    opacity:1.0;

    }

    . callbacks_nav.next {

    Left:auto;

    Background-position:right top;

    right:0;

    }

    #slider3-pager a {

    Display:inline-block;

    }

    #slider3-pager img {

    Float:left;

    }

    #slider3-pager. Rslides_here a {

    Background:transparent;

    box-shadow:0 0 0 2px #666;

    }

    #slider3-pager a {

    padding:0;

    }

    @media screen and (max-width:600px) {

    H1 {

    font:24px/50px "Helvetica Neue", Helvetica, Arial, Sans-serif;

    }

    . callbacks_nav {

    top:47%;

    }

    }

20. Case 1

    <! DOCTYPE html>

    <meta charset= "Utf-8" >

    <title>responsiveslides.js &middot; Responsive JQuery slideshow</title>

    <meta name= "viewport" content= "width=device-width,initial-scale=1" >

    <link rel= "stylesheet" href= ". /responsiveslides.css ">

    <link rel= "stylesheet" href= "Demo.css" >

    <script src= "Http://ajax.googleapis.com/ajax/libs/jquery/1.8.3/jquery.min.js" ></script>

    <script src= ". /responsiveslides.min.js "></script>

    <script>

    You can also use "$ (window)." Load (function () {"

    $ (function () {

    Slideshow 1

    $ ("#slider1"). Responsiveslides ({

    maxwidth:800,

    speed:800

    });

    });

    </script>

    <body>

    <div id= "wrapper" >

    <!--Slideshow 1--

    <ul id= "Slider1" >

    <li></li>

    <li></li>

    <li></li>

    </ul>

    </div>

    </body>

22. Case 1 runs the effect as shown in.

23. Case 2

    <! DOCTYPE html>

    <meta charset= "Utf-8" >

    <title>responsiveslides.js &middot; Responsive JQuery slideshow</title>

    <meta name= "viewport" content= "width=device-width,initial-scale=1" >

    <link rel= "stylesheet" href= ". /responsiveslides.css ">

    <link rel= "stylesheet" href= "Demo.css" >

    <script src= "Http://ajax.googleapis.com/ajax/libs/jquery/1.8.3/jquery.min.js" ></script>

    <script src= ". /responsiveslides.min.js "></script>

    <script>

    You can also use "$ (window)." Load (function () {"

    $ (function () {

    Slideshow 2

    $ ("#slider2"). Responsiveslides ({

    Auto:false,

    Pager:true,

    SPEED:300,

    maxwidth:540

    });

    });

    </script>

    <body>

    <div id= "wrapper" >

    <!--Slideshow 2--

    <ul id= "Slider2" >

    <li><a href= "#" ></a></li>

    <li><a href= "#" ></a></li>

    <li><a href= "#" ></a></li>

    </ul>

    </div>

    </body>

25. Case 2, run as shown in.

    END

Precautions

• Responsiveslides.js relies on jquery and needs to introduce the jquery library
• The Responsiveslides.js realizes the response style

jquery Common plugin Daquan (9) Responsiveslides Plugin