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

最新推荐文章于 2021-06-04 12:41:57 发布

转载最新推荐文章于 2021-06-04 12:41:57 发布 · 716 阅读

ResponsiveSlides.js是一款轻量级的jQuery插件，用于创建响应式幻灯片。该插件仅1.4KB大小，支持多种浏览器，包括IE6及以上版本。通过简单的HTML结构和少量的JavaScript代码即可实现幻灯片的自动播放、切换效果等功能。

摘要生成于 C知道，由 DeepSeek-R1 满血版支持，前往体验 >

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

});