网站流量大了就需要对网站前台的模版做一些简化工作,一是可以提高网站前台的加载速度,二是如果使用CDN静态资源加速的话可以减少CDN的使用量,尽量的降低网站的成本开支。
今天给大家介绍一款实用又小巧的 jQuery 响应式幻灯片插件 ResponsiveSlides.js
ResponsiveSlides.js 是一款小巧的 jQuery 响应式幻灯片插件,压缩后仅仅只有4KB。它兼容几乎所有的浏览器,包括 老掉牙的IE6 以及各种移动平台上的浏览器。虽然他的样子比较单一,但是我们可以利用CSS来美化出各种各样的效果来。
你可以在本文未下载到 'ResponsiveSlides.js’'以及它的demo文件,也可参考本站的幻灯片(ResponsiveSlides.js 二次开发了一下)
ResponsiveSlides.js 使用方法
1、引入相关的文件
<link rel="stylesheet" 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 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代码
$(function () { $("#slider1").responsiveSlides({ maxwidth: 800, speed: 800, pager: true, nav: true, }); }
js代码中可以设置幻灯片的参数,比如切换时间,停留时间,是否开启导航等等
ResponsiveSlides.js 相关参数
下图为 ResponsiveSlides.js 的参数设置,当然你也可以下载本文未的DEMO示例本地查看
如果参数的类型为布尔值,那么开启是用 true 表示,关闭是用 false 来表示