网站流量大了就需要对网站前台的模版做一些简化工作，一是可以提高网站前台的加载速度，二是如果使用CDN静态资源加速的话可以减少CDN的使用量，尽量的降低网站的成本开支。

今天给大家介绍一款实用又小巧的 jQuery 响应式幻灯片插件 ResponsiveSlides.js

ResponsiveSlides.js 是一款小巧的 jQuery 响应式幻灯片插件，压缩后仅仅只有4KB。它兼容几乎所有的浏览器，包括 老掉牙的IE6 以及各种移动平台上的浏览器。虽然他的样子比较单一，但是我们可以利用CSS来美化出各种各样的效果来。

你可以在本文未下载到 'ResponsiveSlides.js’'以及它的demo文件

ResponsiveSlides.js 使用方法

1、引入相关的文件

<link rel="stylesheet" href="responsiveslides.css">
<script src="https://lib.baomitu.com/jquery/1.8.3/jquery.min.js"></script>
<script src="responsiveslides.min.js"></script>

在使用之前，必需要引入jquery.js，不然幻灯片无法正常运行的。

2、html代码

<ul class="rslides" id="slider1">
    <li><a href="#"><img src="images/1.jpg" alt=""></a></li>
    <li><a href="#"><img src="images/2.jpg" alt=""></a></li>
    <li><a href="#"><img src="images/3.jpg" alt=""></a></li>
</ul>

HTML的代码也相当的简单，只需要 li 标签 和 img标签即可。

3、js代码

<script>
$(function () {
    $("#slider1").responsiveSlides({
    maxwidth: 800,
    speed: 800,
    pager: true,
    nav: true,
    });
});
</script>

js代码中可以设置幻灯片的参数，比如切换时间，停留时间，是否开启导航等等

ResponsiveSlides.js 相关参数

下图为 ResponsiveSlides.js 的参数设置，当然你也可以下载本文未的DEMO示例本地查看

如果参数的类型为布尔值，那么开启是用 true 表示，关闭是用 false 来表示

https://pan.baidu.com/s/10ACg7653ndbkw5jJ81etxw 提取码 : 5s9b 

Github:https://github.com/viljamis/ResponsiveSlides.js

via.https://www.feiniaomy.com/post/382.html

 

 参考：http://www.dowebok.com/175.html