幻灯展示jQuery插件supersized

主要特性：

能够自动修改图片大小适合浏览器的页面大小

通过幻灯展示的循环背景可以动态加载并且可以设置变化方式

核心版本可以支持仅仅需要背景变化大小的需要

键盘导航

整合Flickr-可以从用户，组或者集合中拉取图片

参考网站项目页面来查看更多信息

Supersized3.2新特性

完整的重写了代码

更多地选项，包括阻止幻灯被中断

链接到幻灯页面

允许直接调用功能（例如，播放，停止，前进，后退等）

主题文件和基本文件分离，更加容易升级

Javascript

倒入jQuery和插件类库

<scripttype="text/javascript"src="https://ajax.googleapis.com/ajax/libs/jquery/1.5.0/jquery.min.js"></script><scripttype="text/javascript"src="js/supersized.3.1.3.min.js"></script>

设置参数

jQuery(function($){$.supersized({//Functionalityslideshow:1,//Slideshowon/offautoplay:1,//Slideshowstartsplayingautomaticallystart_slide:1,//Startslide(0israndom)random:0,//Randomizeslideorder(Ignoresstartslide)slide_interval:3000,//Lengthbetweentransitionstransition:3,//0-None,1-Fade,2-SlideTop,3-SlideRight,4-SlideBottom,5-SlideLeft,6-CarouselRight,7-CarouselLefttransition_speed:700,//Speedoftransitionnew_window:1,//Imagelinksopeninnewwindow/tabpause_hover:0,//Pauseslideshowonhoverkeyboard_nav:1,//Keyboardnavigationon/offperformance:1,//0-Normal,1-Hybridspeed/quality,2-Optimizesimagequality,3-Optimizestransitionspeed//(OnlyworksforFirefox/IE,notWebkit)image_protect:1,//DisablesimagedraggingandrightclickwithJavascriptimage_path:'img/',//Defaultimagepath//Size&Positionmin_width:0,//Minwidthallowed(inpixels)min_height:0,//Minheightallowed(inpixels)vertical_center:1,//Verticallycenterbackgroundhorizontal_center:1,//Horizontallycenterbackgroundfit_portrait:1,//Portraitimageswillnotexceedbrowserheightfit_landscape:0,//Landscapeimageswillnotexceedbrowserwidth//Componentsnavigation:1,//Slideshowcontrolson/offthumbnail_navigation:1,//Thumbnailnavigationslide_counter:1,//Displayslidenumbersslide_captions:1,//Slidecaption(Pullfrom"title"inslidesarray)slides:[//SlideshowImages{image:'images/slide1.jpg',title:'slide1',url:'http://www.gbin1.com'},{image:'images/slide2.jpg',title:'slide2',url:'http://www.gbin1.com'},{image:'images/slide3.jpg',title:'slide3',url:'http://www.gbin1.com'}]});});

HTML代码

设置控制和导航条代码：

<!--ThumbnailNavigation--><divid="prevthumb"></div><divid="nextthumb"></div>
<!--ControlBar--><divid="controls-wrapper"><divid="controls"><!--Slidecounter--><divid="slidecounter"><spanclass="slidenumber"></span>/<spanclass="totalslides"></span></div><!--Slidecaptionsdisplayedhere--><divid="slidecaption"></div><!--Navigation--><divid="navigation"><imgid="prevslide"src="img/back_dull.png"/><imgid="pauseplay"src="img/pause_dull.png"/><imgid="nextslide"src="img/forward_dull.png"/></div><!--Logoinbar--><ahref="http://www.gbin1.com/technology/jquerynews/20111127jqueryplugin4fullscreenslideshow/index.html"class="stamp">GBin1.comFullScreenSlideShowbyjQuerypluginsupersized</a></div></div>

作者:gbin1：你可以自己设置相关的主题，这里我们使用缺省主题。代码结构请下载演示。谢谢！

这款全屏的幻灯展示jQuery插件supersized，这个插件可以帮助你全屏展示大图片或者大背景，拥有独立的主题及其动态加载特性。