幻灯展示jQuery插件supersized

主要特性：

• 能够自动修改图片大小适合浏览器的页面大小
• 通过幻灯展示的循环背景可以动态加载并且可以设置变化方式
• 核心版本可以支持仅仅需要背景变化大小的需要
• 键盘导航
• 整合Flickr - 可以从用户，组或者集合中拉取图片
• 参考网站项目页面来查看更多信息

Supersized 3.2新特性

• 完整的重写了代码
• 更多地选项，包括阻止幻灯被中断
• 链接到幻灯页面
• 允许直接调用功能（例如，播放，停止，前进，后退等）
• 主题文件和基本文件分离，更加容易升级

Javascript

倒入jQuery和插件类库

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

设置参数

jQuery(function($){     $.supersized({              //Functionality         slideshow               :   1,        //Slideshow on/off         autoplay                :    1,        //Slideshow starts playing automatically         start_slide             :   1,        //Start slide (0 is random)         random                    :     0,        //Randomize slide order (Ignores start slide)         slide_interval          :   3000,    //Length between transitions         transition              :   3,         //0-None, 1-Fade, 2-Slide Top, 3-Slide Right, 4-Slide Bottom, 5-Slide Left, 6-Carousel Right, 7-Carousel Left         transition_speed        :    700,    //Speed of transition         new_window                :    1,        //Image links open in new window/tab         pause_hover             :   0,        //Pause slideshow on hover         keyboard_nav            :   1,        //Keyboard navigation on/off         performance                :    1,        //0-Normal, 1-Hybrid speed/quality, 2-Optimizes image quality, 3-Optimizes transition speed // (Only works for Firefox/IE, not Webkit)         image_protect            :    1,        //Disables image dragging and right click with Javascript         image_path                :    'img/', //Default image path          //Size & Position         min_width                :   0,        //Min width allowed (in pixels)         min_height                :   0,        //Min height allowed (in pixels)         vertical_center         :   1,        //Vertically center background         horizontal_center       :   1,        //Horizontally center background         fit_portrait             :   1,        //Portrait images will not exceed browser height         fit_landscape            :   0,        //Landscape images will not exceed browser width                  //Components         navigation              :   1,        //Slideshow controls on/off         thumbnail_navigation    :   1,        //Thumbnail navigation         slide_counter           :   1,        //Display slide numbers         slide_captions          :   1,        //Slide caption (Pull from "title" in slides array)         slides                     :      [        //Slideshow Images                                             {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代码

设置控制和导航条代码：

<!--Thumbnail Navigation--> <div id="prevthumb"></div> <div id="nextthumb"></div>
<!--Control Bar--> <div id="controls-wrapper">     <div id="controls">              <!--Slide counter-->         <div id="slidecounter">             <span class="slidenumber"></span>/<span class="totalslides"></span>         </div>                  <!--Slide captions displayed here-->         <div id="slidecaption"></div>                  <!--Navigation-->         <div id="navigation">             <img id="prevslide" src="img/back_dull.png"/><img id="pauseplay" src="img/pause_dull.png"/><img id="nextslide" src="img/forward_dull.png"/>         </div>                  <!--Logo in bar-->         <a href="http://www.gbin1.com/technology/jquerynews/20111127jqueryplugin4fullscreenslideshow/index.html" class="stamp">GBin1.com FullScreen SlideShow by jQuery plugin supersized</a>              </div> </div>

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

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