ResponsiveSlides.js 是一个仅仅只有约4KB的幻灯展示插件，压缩后只有不到1KB，而且该插件支持响应式网页，对各种浏览器兼容性都非常好，甚至于IE6都兼容的很完美。这款插件经常被很多WordPress主题开发者应用，可以说是一款不可多得的 优秀插件。
插件下载：
！该插件为jQuery插件，使用前请首先引用 jQuery.js 文件
将 ResponsiveSlides.js 引入到网页之后，基本的HTML代码编写只需要在<ul></ul>标签上添加上css选择器，比如：
- <ul id="slider">
- <li><img src="images/1.jpg" alt=""></li>
- <li><img src="images/2.jpg" alt=""></li>
- <li><img src="images/3.jpg" alt=""></li>
- </ul>
然后添加用户自定的 jQuery 语句，进而启动JS：
- $(function () {
- $("#slider").responsiveSlides({
- auto: true,
- pager: false,
- nav: true,
- speed: 500,
- // 对应外层div的class : slide_container
- namespace: "slide"
- });
- });
官方说明文档中的responsiveSlides中的参数有16个，我大体的翻译了一下，其中填写上的参数值是默认值，如果实际使用的时候不需要修改，则不必填写。只需要编写实际上需要修改的项目即可。
- $(function () {
- $("#slider").responsiveSlides({
- auto: true, // 图像是否自动滑动
- speed: 500, // 图像过渡显示速度，以毫秒计算
- timeout: 4000, // 两图片之间的显示间隔时间，以毫秒计算
- pager: false, // 是否显示图片数量标号，即1234
- nav: false, // 是否显示向前或向后的导航
- random: false, // 是否随机显示
- pause: false, // 鼠标经过时是否静止图片切换
- pauseControls: true, // 鼠标经过控制元素（按钮）上是否静止图片切换
- prevText: "Previous", // 向后箭头的文字说明
- nextText: "Next", // 向前箭头的文字说明
- maxwidth: "", // 最大宽度，像素单位
- navContainer: "", // 导航附着的位置，默认是<ul>之后
- manualControls: "", // Declare custom pager navigation（说实话我这句话看不懂）
- namespace: "rslides", // 修改默认容器的class名称
- before: $.noop, // 在此之前执行命令
- after: $.noop // 在此之后执行命令
- });
- });
比如文章开头部分的例子，修改了auto,page,nav,speed,namespace 5个项目，从而可以定制幻灯展示的样式。
如图所示，木木博客的主题就使用的这款插件，展示效果很不错，该例子可以在网上搜索到。
感谢你的赏识与认可
支付宝
微信支付
使用手机访问这篇文章
本文许可协议 © CC BY-NC-SA 4.0 转载请注明来源
3 条评论
Loading...
发布评论
鲁公网安备37021302001198
很棒的图片轮播，收下了
不错啊