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="images/back_dull.png"/> 
<img id="pauseplay" src="images/pause_dull.png"/> 
<img id="nextslide" src="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:是否随机切换图片

时间: 2024-10-10 20:41:05

jQuery中的supersized的插件的功能描述的相关文章

锋利的jQuery读书笔记---jQuery中的事件

jQuery中的事件: 1.加载DOM:注意window.onload和$(document).ready()的不同 2.事件绑定 3.合成事件 --2和3的详细信息见代码- <!DOCTYPE html> <html> <head lang="en"> <meta charset="UTF-8"> <script type="text/javascript" src="../../

Jquery中的(function($){...})(jQuery)

当你第一眼看到“(function($){...})(jQuery)”的时候,你有什么感觉?呵呵呵,我当时还是止不住的从心底里骂了一句——操,这他妈什么劳什子.时过境迁,对于现在无比倚重Jquery的我,自感当时的自己是那么的无知,今天忙里偷闲,解释一下究竟“(function($){...})(jQuery)”该怎样理解: 代码一: ? 1 2 3 4 5 6 7 8 9 10 11 12 <title>代码一</title> <meta http-equiv="

jQuery中serializeArray方法的使用及对象与字符串的转换

使用jQuery中的serializeArray()方法可以方便的将表单中的各个信息,转化为多个{name:xx,value:xx}对象的数组, 再使用遍历的方式可以方便的将数组转化为json对象, 代码如下 <p id="results"><b>Results: </b> </p> <form> <select name="single"> <option>Single</o

Javascript和jQuery WordPress 图片轮播插件, 内容滚动插件,前后切换幻灯片形式显示

用于在有限的网页空间内展示一组产品图片或者照片,同时还有非常吸引人的动画效果.本文向大家推荐12款实用的 jQuery 图片轮播效果插件,帮助你在你的项目中加入一些效果精美的图片轮播效果,希望这些插件能够帮助到你.Nivo Slider首先推荐的这款插件号称世界上最棒的图片轮播插件,有独立的 jQuery 插件和 WordPress 插件两个版本.目前下载量已经突破 1,800,000 次!jQuery 独立版本的插件主要有如下特色:? 16个独特的过渡效果? 简洁和有效的标记? 加载参数设置?

jQuery中的100个技巧

1.当document文档就绪时执行JavaScript代码. 我们为什么使用jQuery库呢?原因之一就在于我们可以使jQuery代码在各种不同的浏览器和存在bug的浏览器上完美运行. <script src="http://code.jquery.com/jquery-1.10.2.min.js"></script> <script> // Different ways to achieve the Document Ready event //

jQuery中的事件与动画 (你的明天Via Via)

众所周知,页面在加载时,会触发load事件:当用户单击某个按钮时,会触发该按钮的click事件. 这些事件就像日常生活中,人们按下开关,灯就亮了(或者灭了),往游戏机里投入游戏币就可以启动游戏一样, 通过种种事件实现各项功能或执行某项操作.事件在元素对象与功能代码中起着重要的桥梁作用. 在jQuery中,事件总体分为两大类:简单事件和复合事件. jQuery中的简单事件,与JavaScript中的事件几乎一样,都含有window事件.鼠标事件.键盘事件.表单事件等, 只是其对应的方法名称有略微不

jQuery中常用网页效果应用

一.常用网页效果应用 1.表单应用 表单由表单标签.表单域和表单按钮组成. 1.1单行文本框应用 例:获取和失去焦点改变样式 首先,在网页中创建一个表单,HTML代码如下 <form action="" method="post" id="regForm"> <fieldset> <legend>个人基本信息</legend> <div> <label for="user

JQuery中的工具函数总结

前提引入 前提当然也是要引入Jquery啦... <script src="http://libs.baidu.com/jquery/1.9.0/jquery.js" type="text/javascript"></script> 工具方法 ①获取浏览器的名称与版本信息 在jQuery中,通过$.browser对象可以获取浏览器的名称和版本信息,如$.browser.chrome为true,表示当前为Chrome浏览器,$.browser.

jQuery中冲突避免

jQuery中需要用到$符号,如果其他js库也定义了$符号,那么就会造成冲突,会影响到js代码的正常执行,下面有几个不错的解决方法 1.引入noConflict(),将$替换为其他符号 1 2 var $j = jQuery.noConflict(); 3 $j(document).ready(function(){ 4 $j("#btn1").click(function(){ 5 alert("Text: " + $j("#test").te