ResponsiveSlides.js最轻量级的幻灯片插件

摘要：ResponsiveSlides.js是一个展示同一容器内图片的轻量级响应式jQuery幻灯片插件它支持包括IE6在内的几乎所有的浏览器，在IE6中还支持最大宽度属性，但在其它浏览器中并不原生支持。

ResponsiveSlides.js是一个展示同一容器内图片的轻量级响应式jQuery幻灯片插件(tiny responsive slideshow jQuery plugin)。它支持包括IE6在内的几乎所有的浏览器，在IE6中还支持最大宽度属性，但在其它浏览器中并不原生支持。你需要做的只是链接jquery并且把图片裁剪为相同大小。





和其他幻灯演示插件相比最大的特点：

1.文件较小(通过缩减和gz压缩只有792字节)

2.功能简单(R.js只支持两种模式：图片自动淡出淡入和使用页码标签来手动切换图片。)

用法：

第一步：添加链接

<script src="http://ajax.googleapis.com/ajax/libs/jquery/1.7/jquery.min.js"></script>

<script src="responsiveslides.min.js"></script>

第二步：添加标签

<div id="slides">

<img src="1.jpg" alt="" />

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

<img src="3.jpg" alt="" />

</div>

第三步：链接上幻灯（Hook up the slideshow）

<script>

$(function () {

$("#slides").responsiveSlides();

});

</script>

第四步：自定义设置

$("#slides").responsiveSlides({

speed: 4000, //整数：幻灯片切换间隔时间，单位是ms

fade: 1000, //整数：淡入淡出的时间, in milliseconds

auto: true, //布尔类型：是否手动切换图片(“auto:false”会自动添加页面标签)

maxwidth: 800, //整数：幻灯片和图片区域的最大宽度，单位是像素px

namespace: 'rs' //字符串：修改幻灯片类和id的默认命名空间(比如你想在一个页面添加多个幻灯片时使用)

});

如果你不需要页码属性，这就已经完成了！

修改属性"auto:false" (显示页码标签)效果示例：





下面浏览器已通过测试：

• Internet Explorer 6,7,8,9

• Firefox 2,3,6,8

• Safari 5

• Chrome 15

• Opera 11.5

• iOS Safari

• Opera Mobile 10.1

• Opera Mini for iOS

• IE7 Mobile

• Firefox Mobile

• Android browser

• Kindle browser

（复制的，记录每一天！！！！）