jQuery常用插件大全（9）ResponsiveSlides插件

ResponsiveSlides.js是一个展示同一容器内图片的轻量级响应式jQuery幻灯片插件(tiny responsive slideshow jQuery plugin)。它支持包括IE6在内的几乎所有的浏览器，在IE6中还支持最大宽度属性，但在其它浏览器中并不原生支持。你需要做的只是链接jquery并且把图片裁剪为相同大小。

工具/原料

 

• 笔记本电脑或是台式机
• 互联网
• ResponsiveSlides

方法/步骤

 

1. 1

   在github上下载ResponsiveSlides.js，如下图所示。

   
2. 2

   解压ResponsiveSlides.js-master.zip文件，工程目录如下图所示。

   
3. 3

   新建工程目录，将responsiveslides.css、responsiveslides.min.js拷贝进来，分别放在新建的css和js文件夹。

4. 4

   引入文件

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

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

5. 5

   添加HTML标记

   <ul class="rslides">

   <li><img src="1.jpg" alt=""></li>

   <li><img src="2.jpg" alt=""></li>

   <li><img src="3.jpg" alt=""></li>

   </ul>

6.  

   添加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;

   }

7.  

   调用API

   <script>

   $(function() {

   $(".rslides").responsiveSlides();

   });

   </script>

8.  

   API参数：

   $(".rslides").responsiveSlides({

   auto: true,             // Boolean: 设置是否自动播放, true or false

   speed: 500,            // Integer: 动画持续时间，单位毫秒

   timeout: 4000,          // Integer: 图片之间切换的时间，单位毫秒

   pager: false,           // Boolean: 是否显示页码, true or false

   nav: false,             // Boolean: 是否显示左右导航箭头（即上翻下翻）, true or false

   random: false,          // Boolean: 随机幻灯片顺序, true or false

   pause: false,           // Boolean: 鼠标悬停到幻灯上则暂停, true or false

   pauseControls: true,    // Boolean: 悬停在控制板上则暂停, true or false

   prevText: "Previous",   // String: 往前翻按钮的显示文本

   nextText: "Next",       // String: 往后翻按钮的显示文本

   maxwidth: "",           // Integer: 幻灯的最大宽度

   navContainer: "",       // Selector: Where controls should be appended to, default is after the 'ul'

   manualControls: "",     // Selector: 声明自定义分页导航

   namespace: "rslides",   // String: 修改默认的容器名称

   before: function(){},   // Function: 回调之前的参数

   after: function(){}     // Function: 回调之后的参数

9.  

   浏览器支持：

   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

10.  

    特点：

    1.文件较小(通过缩减和gz压缩只有792字节)

    2.功能简单(ResponsiveSlides.js只支持三种模式：图片自动淡出淡入和使用页码标签，或者左右来手动切换图片。)

11.  

    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%;

    }

    }

12.  

    案例1

    <!DOCTYPE html>

    <html>

    <head>

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

    </head>

    <body>

    <div id="wrapper">

    <h1>ResponsiveSlides.js</h1>

    <h2>Simple &amp; lightweight responsive slideshow plugin (in 1kb)</h2>

    <!-- Slideshow 1 -->

    <ul id="slider1">

    <li><img src="data:images/1.jpg" alt=""></li>

    <li><img src="data:images/2.jpg" alt=""></li>

    <li><img src="data:images/3.jpg" alt=""></li>

    </ul>

    </div>

    </body>

    </html>

    
13.  

    案例1运行效果，如下图所示。

    
14.  

    案例2

    <!DOCTYPE html>

    <html>

    <head>

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

    </head>

    <body>

    <div id="wrapper">

    <h1>ResponsiveSlides.js</h1>

    <h2>Simple &amp; lightweight responsive slideshow plugin (in 1kb)</h2>

    <!-- Slideshow 2 -->

    <ul id="slider2">

    <li><a href="#"><img src="data:images/1.jpg" alt=""></a></li>

    <li><a href="#"><img src="data:images/2.jpg" alt=""></a></li>

    <li><a href="#"><img src="data:images/3.jpg" alt=""></a></li>

    </ul>

    </div>

    </body>

    </html>

    
15.  

    案例2，运行效果图，如下图所示。

    
    END

注意事项

 

• ResponsiveSlides.js依赖JQuery，需要引入JQuery库
• ResponsiveSlides.js实现了响应式