摘要:ResponsiveSlides.js是一个展示同一容器内图片的轻量级响应式jQuery幻灯片插件它支持包括IE6在内的几乎所有的浏览器,在IE6中还支持最大宽度属性,但在其它浏览器中并不原生支持。

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

和其他幻灯演示插件相比最大的特点:

1.文件较小(通过缩减和gz压缩只有792字节)

2.功能简单(R.js只支持两种模式:图片自动淡出淡入和使用页码标签来手动切换图片。)

用法:

第一步:添加链接

  1. <script src="http://ajax.googleapis.com/ajax/libs/jquery/1.7/jquery.min.js"></script>
  2. <script src="responsiveslides.min.js"></script>

第二步:添加标签

  1. <div id="slides">
  2. <img src="1.jpg" alt="" />
  3. <img src="2.jpg" alt="" />
  4. <img src="3.jpg" alt="" />
  5. </div>

第三步:链接上幻灯(Hook up the slideshow)

  1. <script>
  2. $(function () {
  3. $("#slides").responsiveSlides();
  4. });
  5. </script>

第四步:自定义设置

  1. $("#slides").responsiveSlides({
  2. speed: 4000, //整数:幻灯片切换间隔时间,单位是ms
  3. fade: 1000, //整数:淡入淡出的时间, in milliseconds
  4. auto: true, //布尔类型:是否手动切换图片(“auto:false”会自动添加页面标签)
  5. maxwidth: 800, //整数:幻灯片和图片区域的最大宽度,单位是像素px
  6. namespace: 'rs' //字符串:修改幻灯片类和id的默认命名空间(比如你想在一个页面添加多个幻灯片时使用)
  7. });

如果你不需要页码属性,这就已经完成了!

修改属性"auto:false" (显示页码标签)效果示例:

下面浏览器已通过测试:

•    Internet Explorer 6,7,8,9

•    Firefox 2,3,6,8

•    Safari 5

•    Chrome 15

•    Opera 11.5

•    iOS Safari

•    Opera Mobile 10.1

•    Opera Mini for iOS

•    IE7 Mobile

•    Firefox Mobile

•    Android browser

•    Kindle browser

(复制的,记录每一天!!!!)

ResponsiveSlides.js最轻量级的幻灯片插件的更多相关文章

  1. (转)jQuery轻量级响应式图片轮播插件ResponsiveSlides.js(仅1kb)也可以做纯文本轮播

    ResponsiveSlides.js是一个展示同一容器内图片的轻量级响应式jQuery幻灯片插件(tiny responsive slideshow jQuery plugin).它支持包括IE6在 ...

  2. jQuery响应式幻灯片插件jquery.glide.js(支持触摸&轻量级)

    找到一款好的幻灯片插件不容易,找到一款功能全并且使用很简单的幻灯片更不容易,今天为大家分享一款全能的幻灯片插件glide.js,也是我现在在使用的一款插件. jquery.glide.js是响应和触摸 ...

  3. 支持移动触摸设备的简洁js幻灯片插件

    lory是一款支持移动触摸设备的简洁的js幻灯片插件.该幻灯片插件可以通过纯js调用,也可以将该幻灯片插件作为jQuery插件来使用.该幻灯片的过渡动画具有硬件加速功能,并且可以定制是否使用easin ...

  4. SlidesJS - 老牌的响应式 jQuery 幻灯片插件

    SlidesJS 是一款老牌的 jQuery 幻灯片插件,经过多年的发展,已经成为一款功能齐全,设计精巧的幻灯片插件.支持循环.自动播放功能和淡入淡出过渡效果,并且能够自动生成分页,可以帮助开发者制作 ...

  5. Skippr – 轻量、快速的 jQuery 幻灯片插件

    Skippr 是一个超级简单的 jQuery 幻灯片插件.只是包括你的网页中引入 jquery.skippr.css 和 jquery.skippr.js 文件就能使用了.Skippr 能够自适应窗口 ...

  6. 幻灯片插件FlexSlider -- Amaze UI幻灯片参数

    用了Amaze UI 的人就知道,其幻灯片插件是 data-am-slider='{}'来传参数的:(以下代码来自Amaze UI 官网) <div data-am-widget="s ...

  7. jq 幻灯片插件制作

    <!DOCTYPE HTML PUBLIC "-//W3C//DTD HTML 4.01 Transitional//EN" "http://www.w3.org/ ...

  8. 绝对炫的幻灯片插件-SKITTER

    绝对炫的幻灯片插件-SKITTER 所属分类:媒体-幻灯片和轮播图,图片展示,滑块和旋转 Includes code source // Styles <link href="css/ ...

  9. Owl Carousel幻灯片插件的使用

    Owl Carousel 是一个强大.实用但小巧的 jQuery 幻灯片插件,它具有一下特点: 兼容所有浏览器 支持响应式 支持 CSS3 过度 支持触摸事件 支持 JSON 及自定义 JSON 格式 ...

随机推荐

  1. Js练习题之查找字符串中出现最多的字符和个数

    如sssfgtdfssddfsssfssss,出现最多的字符是s,出现了12次 传统写法 分析: 1.准备一个空的json,通过循环字符串的每个字符来看,如果json里没有这个字符,就在json里创建 ...

  2. EntityFramework查询oracle数据库时报ora-12704: character set mismatch

    1.这段linq,执行期间报ora-12704:character set mismatch错误. var query = from m in ctx.MENU where (m.SUPER_MENU ...

  3. 如何禁止在DBGRID末位自动添加一行记录

    http://www.tc5u.com/cpp/xg-1730729.htm 用DBGridEh吧,只要设置属性alopAppendEh为false即可 最简单将DBGrid的option属性中goE ...

  4. asp.net后台编写 loading效果

    From :http://www.cnblogs.com/ganmk/articles/1207832.html 使用方法: protected void Page_Load(object sende ...

  5. [USACO精选] 第三章 排序

    #9 重排干草 2014-02-12 QAQ这么快居然开学了,这么来说时间越来越少了…开学第二天,作业不多,赶紧抽出时间把这道想了很久的题给搞定……真的想了很久,其实看了解题也想了很久,我觉得我等数学 ...

  6. pl/sql乱码

    环境变量增加NLS_LANG=SIMPLIFIED CHINESE_CHINA.ZHS16GBK

  7. dom添加事件

    1.语法:document.getElementById('btn').addEventListener 2.可以添加多个EventListener,且不会覆盖 3.移除EventListener, ...

  8. iOS数据存取和对象序列化

    一. 使用NSKeyedArchiver类操作对象的存取 特点:该类可以将对象以键值对的形式存入文件,并通过key从文件中取出,与android中的SharedPreference用法类似,而且它序列 ...

  9. PAT 07-3 求素数

    求素数,这是一个“古老”的问题,每个学过编程的人都应该碰到过,这里是求第M+1到第N个素数,这么经典的问题,当然得给它写上一笔,下面是题设要求及代码实现 /* Name: Copyright: Aut ...

  10. Ogre中Mesh的加载过程详述

    转自:http://blog.csdn.net/yanonsoftware/article/details/1031891 如果新开始写一个3D渲染引擎,Mesh应该是一个很好的切入点.当一个看似简单 ...