ResponsiveSlides 微型响应式幻灯片 jQuery 插件

ResponsiveSlides.js 是一个小型的使用容器的元素创建响应式幻灯片的 jQuery 插件，它已被用在像微软的 Build 2012 和 Gridset App 这类的网站上. ResponsiveSLides.js 可以在大部分的浏览器上运行，包括 IE6 及以上所有版本的浏览器. 它可以支持 IE6 和其他浏览器本身不支持的 css max-width 属性. 支持 jQuery 1.6 或更高版本。可以让焦点图内所有的图片看起来拥有同样的尺寸。

ResponsiveSlides.js 是一个实现响应式幻灯片的 jQuery 插件，它压缩后仅有1.4kb，但是却可以只支持大量的浏览器。

使用方法：

一、首先引入 JS 文件

复制

1 2	< script  src = "http://storage.holdcode.com/libs/jquery/jquery-1.8.3.min.js" ></ script >     < script  src = "../responsiveslides.min.js" ></ script >

二、添加 HTML 标记

复制

1 2 3 4 5

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

三、添加样式

复制

1 2 3 4 5 6 7 8 9 10 11 12 13 14 15 16 17 18 19 20 21 22 23 24 25 26 27 28 29 30 31

.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 ;    }

四、设置幻灯片

复制

1 2 3 4 5

<script>    $( function () {      $( ".rslides" ).responsiveSlides();    }); </script>

你可以自定义的参数：

复制

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

$( ".rslides" ).responsiveSlides({    auto:  true ,              // Boolean: 动画自动, true or false    speed: 500,             // Integer: 速度, 单位是秒    timeout: 4000,           // Integer: Time between slide transitions, in milliseconds    pager:  false ,            // Boolean: 显示分页, true or false    nav:  false ,              // Boolean: 显示左右控制按钮, true or false    random:  false ,           // Boolean: Randomize the order of the slides, true or false    pause:  false ,            // Boolean: Pause on hover, true or false    pauseControls:  true ,     // Boolean: Pause when hovering controls, true or false    prevText:  "Previous" ,    // String: Text for the "previous" button    nextText:  "Next" ,        // String: Text for the "next" button    maxwidth:  "" ,            // Integer: Max-width of the slideshow, in pixels    navContainer:  "" ,        // Selector: Where controls should be appended to, default is after the 'ul'    manualControls:  "" ,      // Selector: Declare custom pager navigation    namespace:  "rslides" ,    // String: Change the default namespace used    before:  function (){},    // Function: Before callback    after:  function (){}      // Function: After callback });

支持的浏览器

• 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

如果想使用不同样式的 next/prev 按钮，可参照演示：http://demos.holdcode.com/plugin/responsiveSlides/demo/themes/themes.html