zoukankan      html  css  js  c++  java
  • 一款jQuery图片浏览插件可简单的设置7种切换效果

    一款国外强大的jQuery图片浏览插件可设置7种切换jquery特效效果。

    切换效果,切换时间长短,是否加载后自动播放,播放速度都是可以再插件里面简单的设置一下就可以看到效果!非常牛的一个jQuery插件。

    适用于浏览器:IE8以上的浏览器,firefox,google等。

    jquery插件主要代码如下:

     1 <script type="text/javascript">    
     2             jQuery(function($){    
     3                 $.supersized({
     4                     // Functionality
     5                     slideshow               :   1,            // Slideshow on/off
     6                     autoplay                :    0,            // Slideshow starts playing automatically(加载时是否自动播放)
     7                     start_slide             :   1,            // Start slide (0 is random)
     8                     stop_loop                :    0,            // Pauses slideshow on last slide(是否循环播放)
     9                     random                    :     0,            // Randomize slide order (Ignores start slide)
    10                     slide_interval          :   5000,        // Length between transitions(播放时间)
    11                     transition              :   4,             // 0-None, 1-Fade, 2-Slide Top, 3-Slide Right, 4-Slide Bottom, 5-Slide Left, 6-Carousel Right, 7-Carousel Left (太TM强大了,这可以选择切换时的方式  用数字表示)
    12                     transition_speed        :    3000,        // Speed of transition (切换时的过渡时间设置)
    13                     new_window                :    1,            // Image links open in new window/tab
    14                     pause_hover             :   0,            // Pause slideshow on hover
    15                     keyboard_nav            :   1,            // Keyboard navigation on/off
    16                     performance                :    1,            // 0-Normal, 1-Hybrid speed/quality, 2-Optimizes image quality, 3-Optimizes transition speed // (Only works for Firefox/IE, not Webkit)
    17                     image_protect            :    1,            // Disables image dragging and right click with Javascript                                        
    18                     // Size & Position                           
    19                     min_width                :   0,            // Min width allowed (in pixels)
    20                     min_height                :   0,            // Min height allowed (in pixels)
    21                     vertical_center         :   1,            // Vertically center background
    22                     horizontal_center       :   1,            // Horizontally center background
    23                     fit_always                :    0,            // Image will never exceed browser width or height (Ignores min. dimensions)
    24                     fit_portrait             :   1,            // Portrait images will not exceed browser height
    25                     fit_landscape            :   0,            // Landscape images will not exceed browser width                                    
    26                     // Components                            
    27                     slide_links                :    'blank',    // Individual links for each slide (Options: false, 'num', 'name', 'blank')
    28                     thumb_links                :    1,            // Individual thumb links for each slide
    29                     thumbnail_navigation    :   0,            // Thumbnail navigation40                                                 ],                        
    41                     // Theme Options               
    42                     progress_bar            :    1,            // Timer for each slide                            
    43                     mouse_scrub                :    0
    44                 });
    45             });
    46         </script>

    特效效果图如下:

    马上去寻找此jquery特效http://www.jqshare.com/Jq/fondone/id/105.html

  • 相关阅读:
    设计模式之里氏替换原则
    设计模式之依赖倒转原则
    设计模式之接口分离原则
    spring 集成 kafka producer(KafkaTemplate)
    jmeter 分布式
    ant+Jenkins+jmeter
    pycharm+git+github项目上传
    Python_pip下载不下来源解决方案
    linux_python3环境搭建
    Jenkins+Git+Github+Python自动化化接口项目例子
  • 原文地址:https://www.cnblogs.com/heyoung/p/3081027.html
Copyright © 2011-2022 走看看