每个人的成功之路可能有所不同，但我相信成功需要每个想要成功的人人民努力奋斗和奋斗，通往成功的每条道路都是坎s曲折。
网站流量大了就需要对网站前台的模版做一些简化工作，一是可以提高网站前台的加载速度，二是如果使用CDN静态资源加速的话可以减少CDN的使用量，尽量的降低网站的成本开支。
今天给大家介绍一款实用又小巧的 jQuery 响应式幻灯片插件 ResponsiveSlides.js
ResponsiveSlides.js 是一款小巧的 jQuery 响应式幻灯片插件，压缩后仅仅只有4KB。它兼容几乎所有的浏览器，包括 老掉牙的IE6 以及各种移动平台上的浏览器。虽然他的样子比较单一，但是我们可以利用CSS来美化出各种各样的效果来。
你可以在本文未下载到 'ResponsiveSlides.js’'以及它的demo文件，也可参考本站的幻灯片(ResponsiveSlides.js 二次开发了一下)
ResponsiveSlides.js 使用方法
1、引入相关的文件
<link rel="stylesheet" rel="nofollow" href="responsiveslides.css"> <script src="jquery.min.js"></script> <script src="responsiveslides.min.js"></script>
在使用之前，必需要引入jquery.js，不然幻灯片无法正常运行的。
2、html代码
<ul class="rslides" id="slider1"> <li><a rel="nofollow" href="#"><img src="images/1.jpg" alt=""></a></li> <li><a rel="nofollow" href="#"><img src="images/2.jpg" alt=""></a></li> <li><a rel="nofollow" href="#"><img src="images/3.jpg" alt=""></a></li> </ul>
HTML的代码也相当的简单，只需要 li 标签 和 img标签即可。
3、js代码
$(function () {
$("#slider1").responsiveSlides({
maxwidth: 800,
speed: 800,
pager: true,
nav: true,
});
}js代码中可以设置幻灯片的参数，比如切换时间，停留时间，是否开启导航等等
ResponsiveSlides.js 相关参数
下图为 ResponsiveSlides.js 的参数设置，当然你也可以下载本文未的DEMO示例本地查看
如果参数的类型为布尔值，那么开启是用 true 表示，关闭是用 false 来表示
[Downloads]下载内容[/Downloads]
到此这篇关于推荐一款JQ轻量级的幻灯片插件就介绍到这了。成功的先决条件，是不变的信心，坚强的意志。更多相关推荐一款JQ轻量级的幻灯片插件内容请查看相关栏目，小编编辑不易，再次感谢大家的支持！
