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

来源：互联网发布：手机h5页面制作软件编辑：程序博客网时间：2024/04/30 11:25

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>

三、添加样式

复制

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

你可以自定义的参数：

复制

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

0 0