分享一個jQuery的全屏幻燈展示插件：Supersized 3.2

今天介紹一款全屏的幻燈展示jQuery插件supersized，這個插件可以幫助你全屏展示大圖片或者大背景，擁有獨立的主題及其動態(tài)加載特性。

在線演示

主要特性：

能夠自動修改圖片大小適合瀏覽器的頁面大小
通過幻燈展示的循環(huán)背景可以動態(tài)加載并且可以設(shè)置變化方式
核心版本可以支持僅僅需要背景變化大小的需要
鍵盤導(dǎo)航
整合Flickr - 可以從用戶，組或者集合中拉取圖片
參考網(wǎng)站項目頁面來查看更多信息

Supersized 3.2新特性

完整的重寫了代碼
更多地選項，包括阻止幻燈被中斷
鏈接到幻燈頁面
允許直接調(diào)用功能（例如，播放，停止，前進(jìn)，后退等）
主題文件和基本文件分離，更加容易升級

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>

設(shè)置參數(shù)

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代碼

設(shè)置控制和導(dǎo)航條代碼：

<!--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>

你可以自己設(shè)置相關(guān)的主題，這里我們使用缺省主題。代碼結(jié)構(gòu)請下載演示。謝謝！

posted @ 2011-11-27 20:55 igeekbar 閱讀(4896) 評論(2) 收藏舉報

刷新頁面返回頂部

分享一個jQuery的全屏幻燈展示插件：Supersized 3.2

主要特性：

Supersized 3.2新特性

Javascript

HTML代碼

公告

中文互聯(lián)： GBin1.com | RSS訂閱 | 郵件訂閱 | 手機(jī)訂閱