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

复制

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

二、添加 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 >

三、添加样式

复制

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

四、设置幻灯片

复制

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

你可以自定义的参数：

复制

$( ".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