幻燈展現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，這個插件能夠幫助你全屏展現大圖片或者大背景，擁有獨立的主題及其動態加載特性。