jQuery常用插件大全ResponsiveSlides插件

Posted 小菜与小鸟

tags:

篇首语:本文由小常识网(cha138.com)小编为大家整理,主要介绍了jQuery常用插件大全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" ></li>

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

      <li><img src="3.jpg" ></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="images/1.jpg" ></li>

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

          <li><img src="images/3.jpg" ></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="images/1.jpg" ></a></li>

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

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

        </ul>

      </div>

    </body>

    </html>

    技术分享图片
  15.  

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

    技术分享图片
    END

注意事项

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

以上是关于jQuery常用插件大全ResponsiveSlides插件的主要内容,如果未能解决你的问题,请参考以下文章

Atom-常用插件大全

Atom-常用插件大全

前端工具大全:你不能错过的JQuery插件库

Eclipse 常用插件地址大全

uniapp 常用原生插件大全

uniapp 常用原生插件大全