• 分享一个jQuery的全屏幻灯展示插件:Supersized 3.2


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

    分享一个jQuery的全屏幻灯展示插件:Supersized 3.2

    在线演示

    主要特性:

    • 能够自动修改图片大小适合浏览器的页面大小
    • 通过幻灯展示的循环背景可以动态加载并且可以设置变化方式
    • 核心版本可以支持仅仅需要背景变化大小的需要
    • 键盘导航
    • 整合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>
    
    

    你可以自己设置相关的主题,这里我们使用缺省主题。代码结构请下载演示。谢谢!

  • 相关阅读:
    Asp.net中利用ExecuteNonQuery()执行存储过程返回1解决方案
    在workflow中,无法为实例 ID“...”传递接口类型“...”上的事件“...” 问题的解决方法。
    jquery获取一个table中的一行的每个td的内容
    自动ping博客服务程序
    总结JavaScript(Iframe、window.open、window.showModalDialog)父窗口与子窗口之间的操作
    sql server try...catch使用
    IAsyncResult异步设计
    jquery 判断一个对象是否存在
    数据库表扩展字段设计思路
    REST接口POST方法发送文件到服务器(C#)
  • 原文地址:https://www.cnblogs.com/gbin1/p/2265270.html
Copyright © 2020-2023  润新知