欢迎访问

云南鼎浩信息技术有限公司官方网站,云南网站建设诚信品牌!

鼎浩网络,云南鼎浩信息技术有限公司

鼎浩客服热线

DING HAO COLUMN 鼎浩专栏

鼎浩的一些分享
Sharing from Ding Hao

  • 鼎浩服务
  • 1

Supersized:图片全屏展示效果

来源:     2013年07月02日17:02
字号:T|T

Supersized是一款基于jQuery的功能强大的图片切换插件,可以应用在一些大型图片站的项目中,该插件可以将图片等比例拉伸充满整个浏览器屏幕,支持滑动、淡入淡出等多种图片切换效果。

查看演示DEMO 下载源码

Supersized特性:

  • 自动等比例调整图片并填充整浏览器个屏幕。
  • 循环展示图片,支持滑动和淡入淡出等多种图片切换效果。
  • 导航按钮,支持键盘方向键导航。

XHTML

 
/

XHTML结构代码中,#loading用来显示加载图片动画的;#supersized用来显示所要展示的图片;#prevthumb和#nextthumb用来展示上一张和下一张的缩略图;#controls-wrapper控制条,放置控制按钮,以及图片标题内容等。

记得在XHTML页面里引入jquery库和Supersized插件以及CSS文件。


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:是否随机切换图片


客服中心
点击进行在线咨询

QQ咨询 咨询QQ:79929313 咨询QQ:88139574 咨询QQ:122790803

咨询热线:0871-63399840

客服热线:0871-63523332

客服中心 客服中心