您的位置:首页 > Web前端 > JavaScript

ResponsiveSlides.js——小于1k的轻量级幻灯片演示插件

2013-12-25 16:41 621 查看

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

和其他幻灯演示插件相比最大的特点:1.文件较小(通过缩减和gz压缩只有792字节)2.功能简单(R.js只支持两种模式:图片自动淡出淡入和使用页码标签来手动切换图片。)用法:第一步:添加链接<scriptsrc="http://ajax.googleapis.com/ajax/libs/jquery/1.7/jquery.min.js"></script><scriptsrc="responsiveslides.min.js"></script>第二步:添加标签<divid="slides"><imgsrc="1.jpg"alt=""/><imgsrc="2.jpg"alt=""/><imgsrc="3.jpg"alt=""/></div>第三步:链接上幻灯(Hook up the slideshow)<script>$(function () { $("#slides").responsiveSlides(); });</script>第四步:自定义设置$("#slides").responsiveSlides({ speed: 4000, //整数:幻灯片切换间隔时间,单位是ms fade: 1000, //整数:淡入淡出的时间, in millisecondsauto: true, //布尔类型:是否手动切换图片(“auto:false”会自动添加页面标签)maxwidth: 800, //整数:幻灯片和图片区域的最大宽度,单位是像素pxnamespace: 'rs' //字符串:修改幻灯片类和id的默认命名空间(比如你想在一个页面添加多个幻灯片时使用)});
如果你不需要页码属性,这就已经完成了!修改属性"auto:false" (显示页码标签)效果示例:http://responsive-slides.viljamis.com/
内容来自用户分享和网络整理,不保证内容的准确性,如有侵权内容,可联系管理员处理 点击这里给我发消息
标签:  浏览器 幻灯片 jquery