ResponsiveSlides.js最轻量级的幻灯片插件
摘要:ResponsiveSlides.js是一个展示同一容器内图片的轻量级响应式jQuery幻灯片插件它支持包括IE6在内的几乎所有的浏览器,在IE6中还支持最大宽度属性,但在其它浏览器中并不原生支持。
ResponsiveSlides.js是一个展示同一容器内图片的轻量级响应式jQuery幻灯片插件(tiny responsive slideshow jQuery plugin)。它支持包括IE6在内的几乎所有的浏览器,在IE6中还支持最大宽度属性,但在其它浏览器中并不原生支持。你需要做的只是链接jquery并且把图片裁剪为相同大小。
和其他幻灯演示插件相比最大的特点:
1.文件较小(通过缩减和gz压缩只有792字节)
2.功能简单(R.js只支持两种模式:图片自动淡出淡入和使用页码标签来手动切换图片。)
用法:
第一步:添加链接
- <script src="http://ajax.googleapis.com/ajax/libs/jquery/1.7/jquery.min.js"></script>
- <script src="responsiveslides.min.js"></script>
第二步:添加标签
- <div id="slides">
- <img src="1.jpg" alt="" />
- <img src="2.jpg" alt="" />
- <img src="3.jpg" alt="" />
- </div>
第三步:链接上幻灯(Hook up the slideshow)
- <script>
- $(function () {
- $("#slides").responsiveSlides();
- });
- </script>
第四步:自定义设置
- $("#slides").responsiveSlides({
- speed: 4000, //整数:幻灯片切换间隔时间,单位是ms
- fade: 1000, //整数:淡入淡出的时间, in milliseconds
- auto: true, //布尔类型:是否手动切换图片(“auto:false”会自动添加页面标签)
- maxwidth: 800, //整数:幻灯片和图片区域的最大宽度,单位是像素px
- namespace: 'rs' //字符串:修改幻灯片类和id的默认命名空间(比如你想在一个页面添加多个幻灯片时使用)
- });
如果你不需要页码属性,这就已经完成了!
修改属性"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最轻量级的幻灯片插件的更多相关文章
- (转)jQuery轻量级响应式图片轮播插件ResponsiveSlides.js(仅1kb)也可以做纯文本轮播
ResponsiveSlides.js是一个展示同一容器内图片的轻量级响应式jQuery幻灯片插件(tiny responsive slideshow jQuery plugin).它支持包括IE6在 ...
- jQuery响应式幻灯片插件jquery.glide.js(支持触摸&轻量级)
找到一款好的幻灯片插件不容易,找到一款功能全并且使用很简单的幻灯片更不容易,今天为大家分享一款全能的幻灯片插件glide.js,也是我现在在使用的一款插件. jquery.glide.js是响应和触摸 ...
- 支持移动触摸设备的简洁js幻灯片插件
lory是一款支持移动触摸设备的简洁的js幻灯片插件.该幻灯片插件可以通过纯js调用,也可以将该幻灯片插件作为jQuery插件来使用.该幻灯片的过渡动画具有硬件加速功能,并且可以定制是否使用easin ...
- SlidesJS - 老牌的响应式 jQuery 幻灯片插件
SlidesJS 是一款老牌的 jQuery 幻灯片插件,经过多年的发展,已经成为一款功能齐全,设计精巧的幻灯片插件.支持循环.自动播放功能和淡入淡出过渡效果,并且能够自动生成分页,可以帮助开发者制作 ...
- Skippr – 轻量、快速的 jQuery 幻灯片插件
Skippr 是一个超级简单的 jQuery 幻灯片插件.只是包括你的网页中引入 jquery.skippr.css 和 jquery.skippr.js 文件就能使用了.Skippr 能够自适应窗口 ...
- 幻灯片插件FlexSlider -- Amaze UI幻灯片参数
用了Amaze UI 的人就知道,其幻灯片插件是 data-am-slider='{}'来传参数的:(以下代码来自Amaze UI 官网) <div data-am-widget="s ...
- jq 幻灯片插件制作
<!DOCTYPE HTML PUBLIC "-//W3C//DTD HTML 4.01 Transitional//EN" "http://www.w3.org/ ...
- 绝对炫的幻灯片插件-SKITTER
绝对炫的幻灯片插件-SKITTER 所属分类:媒体-幻灯片和轮播图,图片展示,滑块和旋转 Includes code source // Styles <link href="css/ ...
- Owl Carousel幻灯片插件的使用
Owl Carousel 是一个强大.实用但小巧的 jQuery 幻灯片插件,它具有一下特点: 兼容所有浏览器 支持响应式 支持 CSS3 过度 支持触摸事件 支持 JSON 及自定义 JSON 格式 ...
随机推荐
- 简单模拟QQ界面框架。
package com.lixu.qqjiemian; import java.util.Timer; import java.util.TimerTask; import android.app.A ...
- jsp和servlet的区别
servlet是服务器端的程序,动态生成html页面发到客户端,但是这样 程序里有许多out.println(),java和html语言混在一起很乱.所以 后来推出了jsp.其实jsp就是servle ...
- 套汇问题 Floyd
问题:套汇. 思路:Floyd 代码: #include <cstdio> #include <cstdlib> #include <ctime> #define ...
- 二模 (1) day2
第一题: 题目大意: N层楼,K个人,M个箱子在1楼,给出K个人的初始状态(在第几楼,正在向上走还是向下走,向上走的人手里已经有箱子),每次移动一层楼,求把所有箱子(手里拿着的不算在M里)全部搬到顶楼 ...
- 向MySql中插入中文时出现乱码
这个因为字符集编码问题.在连接字符串中加上CharSet=gbk
- TStringList 的Sorted属性
1 .设置 sorted := true; 2.添加数据 add('3');add('4');add('1'); showmessage(commatext);// 1,3,4 3.再修改Sorted ...
- BeanUtils组件
引入jar包(需要引入依赖的日志jar包) Person p = new Person(); p.setName("Daisy"); p.setAge(12); //对象的copy ...
- Android 插入图片到媒体库
今天介绍一下在Android中怎么插入图片到媒体库,下面看代码: final String titleName = Function.md5(imageUri.toLowerCase()) + &qu ...
- android 获取activity 的name
String contextString = this.toString();String name = contextString.substring(contextString.lastIndex ...
- Notification通知栏
Notification通知栏 首先实现的功能就是通知栏显示Notification,Notification是显示在系统的通知栏上面的,所以Notification 是属于进程之前的通讯.进程之间的 ...