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的插件的功能描述的更多相关文章

  1. jQuery中的each, data, 插件

    一.  each() $(' ').each(function (){...}) jQuery.each(collection, callback(indexInArray, valueOfEleme ...

  2. jQuery中的工具和插件

    jQuery的工具属性 jQuery类数组操作 length属性 表示获取类数组中元素的个数 get()方法 表示获取类数组中单个元素"括号中填写该元素的索引值" index()方 ...

  3. JQuery中的DataTables表格插件

    一.DataTables表格插件的简介 DataTables是一个jQuery的表格插件.它具有以下特点: 自动分页处理 即时表格数据过滤 数据排序以及数据类型自动检测 自动处理列宽度 可通过CSS定 ...

  4. jQuery中的插件的编写和使用

    1,常用的jQuery插件:表单验证插件formValidator a.目前支持5大验证方式:1.inputValidator(针对input,textarea,select控件的字符长度,值范围,选 ...

  5. jQuery中开发插件的两种方式

    jQuery中开发插件的两种方式(附Demo) 做web开发的基本上都会用到jQuery,jQuery插件开发两种方式:一种是类扩展的方式开发插件,jQuery添加新的全局函数(jQuery的全局函数 ...

  6. JQuery中简约的进度条插件推荐

    JQuery Progress Bar是基于JQuery开发的进度条插件,秉承了JQuery的简约哲学.不仅容易使用,而且可以轻松定制外观.对于使用了JQuery框架的项目来说,需要使用进度条控件时这 ...

  7. JQuery中的工具函数总结

    前提引入 前提当然也是要引入Jquery啦... <script src="http://libs.baidu.com/jquery/1.9.0/jquery.js" typ ...

  8. jQuery中的100个技巧

      1.当document文档就绪时执行JavaScript代码. 我们为什么使用jQuery库呢?原因之一就在于我们可以使jQuery代码在各种不同的浏览器和存在bug的浏览器上完美运行. < ...

  9. jQuery中Animate进阶用法(一)

    jQuery中animate的用法你了解多少呢?如果仅仅是简单的移动位置,显示隐藏,哦!天哪你在浪费资源!因为animate太强大了,你可以有很多意想不到的用法!让我们一起研究一下吧~~ 首先要了解j ...

随机推荐

  1. 忽然有一种感觉:云存储必须从系统级定制,所以必须对Linux相当熟悉。Windows下开发软件的模式已经过时了

    看了诸多招聘帖子以后的感觉- 工作内容: .存储相关产品的设计.开发和维护. .Linux系统应用程序研发. .主流Linux内核文件系统研发. .自动化测试框架和工具的研发. 职位要求: .计算机相 ...

  2. QT5中如何使用QFtp类(这个类虽然没有被收录,但一直在更新)

    由于QT5对QML的支持有很大的改进,所以打算将原来基于QT4的程序移植到QT5上,在移植用QFtp类写的程序时傻眼了! Qt5 移除了 QFtp API,原因是其实现质量.QNetworkAcces ...

  3. Delphi调用安装驱动sys的单元

    unit SysDriver; interface uses windows, winsvc; // jwawinsvc; Type TSysDriver = class(TObject) priva ...

  4. window.opener方法的使用 js跨域

    原文:window.opener方法的使用 js跨域 最近公司网站登陆加入了第三方登陆.可以用QQ直接登陆到我们网站,在login页面A中点QQ登陆时,调用了一个window.open文件打开一个lo ...

  5. codeforces gym 100463I Yawner

    //这题挂得让我怀疑我最近是不是做了什么坏事 题意:一个人有两个集合,先在其中一个集合选一个数x,然后向右走x布,然后再在另一个集合里选一个数y,向左走y步,问是否能走完数轴上所有点. 解:显然是求g ...

  6. 自动测试工具SilkTest全面介绍

    象交互,并最终记录测试结果,用户可以根据这些测试结果来判断测试成功还是失败. 4Test 脚本语言 和绝大多数自动化测试工具一样, SilkTest 可以自动捕捉,检测和重复用户交互的操作从而驱动测试 ...

  7. 当浏览器不支持placeholder,所执行的函数

    $(function(){ //判断浏览器是否支持placeholder属性 supportPlaceholder='placeholder'in document.createElement('in ...

  8. 各种浏览器兼容篡位的css样式写法

    谷歌浏览器的识别 @media screen and (-webkit-min-device-pixel-ratio:0) { height:10px; } IE6特制识别的 *HTML .Searc ...

  9. edit distance leetcode

    这样的字符转换的dp挺经典的, 若word1[i+1]==word2[j+1] dp[i+1][j+1] = dp[i][j]:否则,dp[i+1][j+1] = dp[i][j] + 1.(替换原则 ...

  10. andengine游戏引擎总结基础篇

      其他的游戏引擎知道的不是很对,不过相对于学java的童鞋们来说,那是个不错的选择啦,这个发动机咋样,google去吧.基础篇包括图片,字体,音效,数据读取,会了这点,就会做简单的小游戏啦 对于游戏 ...