jQuery中的supersized的插件的功能描述
Supersized特性:
- 自动等比例调整图片并填充整浏览器个屏幕。
- 循环展示图片,支持滑动和淡入淡出等多种图片切换效果。
- 导航按钮,支持键盘方向键导航。
XHTML
<div id="loading"> </div>
<div id="supersized"></div>
<div id="prevthumb"></div>
<div id="nextthumb"></div>
<div id="controls-wrapper">
<div id="controls">
<div id="slidecounter">
<span class="slidenumber"></span>/<span class="totalslides"></span>
</div>
<div id="slidecaption"></div>
<div id="navigation">
<img id="prevslide" src="data:images/back_dull.png"/>
<img id="pauseplay" src="data:images/pause_dull.png"/>
<img id="nextslide" src="data:images/forward_dull.png"/>
</div>
</div>
</div>
XHTML结构代码中,#loading用来显示加载图片动画的;#supersized用来显示所要展示的图片;#prevthumb
和#nextthumb用来展示上一张和下一张的缩略图;#controls-wrapper控制条,放置控制按钮,以及图片标题内容等。
记得在XHTML页面里引入jQuery库和Supersized插件以及CSS文件。
<script type="text/JavaScript" src="jquery.min.js"></script>
<script type="text/javascript" src="supersized.3.0.js"></script>
<link rel="stylesheet" href="supersized.css" type="text/css" media="screen" />
jQuery
$(function(){
$.fn.supersized.options = {
vertical_center: 1,
slideshow: 1,
navigation: 1,
thumbnail_navigation: 1,
transition: 1, //0-None, 1-Fade, 2-slide top, 3-slide right, 4-slide bottom, 5-slide left
pause_hover: 0,
slide_counter: 1,
slide_captions: 1,
slide_interval: 3000,
slides : [
{image : 'slides/tower.jpg', title : 'City Clock Tower',
url : 'http://www.helloweba.com'},
{image : 'slides/fence.jpg', title : 'Canal Park Fence',
url : 'http://www.helloweba.com/blog.html'},
{image : 'slides/tracks.jpg', title : 'Old Train Tracks',
url : 'http://www.helloweba.com/case.html'}
]
};
$("#supersized").supersized();
});
参数说明:
vertical_center:是否让图像垂直居中,如果为0,则图像为顶端对齐。
slideshow:是否显示展示工具条,包括标题、图片数字和导航按钮。
navigation:是否展示导航按钮。
thumbnail_navigation:为1时可以通过单击缩略图导航切换图片,为0时,缩略图不显示。
pause_hover:是否鼠标滑向图片时暂停图片切换。
transition:图片切换效果,0-无,1-淡入淡出,2-向上滑动,3-向右滑动,4-向下滑动,5-向左滑动。
slide_counter:是否显示切换图片的数字。
slide_captions:是否显示图片标题。
slide_interval:图片切换间隔时间(毫秒)
slides:所切换的图片集合,包括图片地址image,图片标题title,图片链接url。
autoplay:是否自动播放。
transition_speed:切换速度,默认750。
keyboard_nav:是否支持键盘操作切换。
random:是否随机切换图片
jQuery中的supersized的插件的功能描述的更多相关文章
- jQuery中的each, data, 插件
一. each() $(' ').each(function (){...}) jQuery.each(collection, callback(indexInArray, valueOfEleme ...
- jQuery中的工具和插件
jQuery的工具属性 jQuery类数组操作 length属性 表示获取类数组中元素的个数 get()方法 表示获取类数组中单个元素"括号中填写该元素的索引值" index()方 ...
- JQuery中的DataTables表格插件
一.DataTables表格插件的简介 DataTables是一个jQuery的表格插件.它具有以下特点: 自动分页处理 即时表格数据过滤 数据排序以及数据类型自动检测 自动处理列宽度 可通过CSS定 ...
- jQuery中的插件的编写和使用
1,常用的jQuery插件:表单验证插件formValidator a.目前支持5大验证方式:1.inputValidator(针对input,textarea,select控件的字符长度,值范围,选 ...
- jQuery中开发插件的两种方式
jQuery中开发插件的两种方式(附Demo) 做web开发的基本上都会用到jQuery,jQuery插件开发两种方式:一种是类扩展的方式开发插件,jQuery添加新的全局函数(jQuery的全局函数 ...
- JQuery中简约的进度条插件推荐
JQuery Progress Bar是基于JQuery开发的进度条插件,秉承了JQuery的简约哲学.不仅容易使用,而且可以轻松定制外观.对于使用了JQuery框架的项目来说,需要使用进度条控件时这 ...
- JQuery中的工具函数总结
前提引入 前提当然也是要引入Jquery啦... <script src="http://libs.baidu.com/jquery/1.9.0/jquery.js" typ ...
- jQuery中的100个技巧
1.当document文档就绪时执行JavaScript代码. 我们为什么使用jQuery库呢?原因之一就在于我们可以使jQuery代码在各种不同的浏览器和存在bug的浏览器上完美运行. < ...
- jQuery中Animate进阶用法(一)
jQuery中animate的用法你了解多少呢?如果仅仅是简单的移动位置,显示隐藏,哦!天哪你在浪费资源!因为animate太强大了,你可以有很多意想不到的用法!让我们一起研究一下吧~~ 首先要了解j ...
随机推荐
- oracle 创建表空间详细介绍
注意点: 1.如果在PL/SQL 等工具里打开的话,直接修改下面的代码中[斜体加粗部分]执行 2.确保路径存在,比如[D:\oracle\oradata\Oracle9i\]也就是你要保存文件的路径存 ...
- Java Script 中 ==(Equal) 和 === (Identity Equal) 的区别和比较算法逻辑
判断两个变量是否相等在任何编程语言中都是非常重要的功能. JavaScript 提供了 == 和 === 两种判断两个变量是否相等的运算符,但我们开始学习的时候 JavaScript 的时候,就被一遍 ...
- Linux下编译安装qemu和libvirt
目录 [hide] 1 安装qemu 1.1 qemu介绍 1.2 下载源文件 1.3 编译安装 2 安装libvirt 2.1 libvirt介绍 2.2 下载libvirt 2.3 编译安装 3 ...
- QT 小票打印
原地址: http://www.cppblog.com/biao/archive/2009/09/08/95603.html QString htmlString = QString("&l ...
- AOP概念
在软件业,AOP为Aspect Oriented Programming的缩写,意为:面向切面编程,通过预编译方式和运行期动态代理实现程序功能的统一维护的一种技术.AOP是OOP的延续,是软件开发中的 ...
- accel-pptp 部署
accel-pptp 是 pptp-client 和 pptpd 的改进版,使用内核 pptp 模块,相比 raw socket 实现方式能提供更好的性能. Ubuntu 12.04 上启用内核 ...
- Singleton 单例模式 泛型 窗体控制
MDI子窗体 控制单例 /// <summary> /// 单例提供者 /// </summary> /// <typeparam name="T"& ...
- WIN_2003_SP2.iso VMware 不能进行网络访问的处理
1.打开IE发现不能上网的问题 ping命令 发现确实是网络不通: 2.关闭虚拟机设置网络适配器 3.ping命令验证是否设置成功 4.打开IE访问百度
- hdu 4711 Weather概率dp
http://acm.hdu.edu.cn/showproblem.php?pid=4711 真的是坑吐血了,wa了5次 最后实在无语 把long long double 改成long double ...
- 1、什么是Lucene,Lucene能干什么
1.什么是lucene Lucene是一个全文搜索框架,而不是应用产品.因此它并不像http://www.baidu.com/ 或者google Desktop那么拿来就能用,它只是提供了一种工具让 ...