JQuery图片切换全屏显示插件Sup e r sized

简介

Supersized 是一款功能强大的图片切换插件，支持等比例缩放图片填充成全屏效果，支持滑动和淡入淡出等多种动画切换效果。

（下载的附件中带有DEMO）

Supersized特性：

自动等比例调整图片并填充整浏览器个屏幕。

循环展示图片，支持滑动和淡入淡出等多种图片切换效果。

导航按钮，支持键盘方向键导航。

参数说明：

vertical_center：是否让图像垂直居中，如果为0，则图像为顶端对齐。
slideshow：是否显示展示工具条，包括标题、图片数字和导航按钮。
navigation：是否展示导航按钮。
thumbnail_navigation：为1时可以通过单击缩略图导航切换图片，为0时，缩略图不显示。
pause_hover：是否鼠标滑向图片时暂停图片切换。
transition：图片切换效果，0-无，1-淡入淡出，2-向上滑动，3-向右滑动，4-向下滑动，5-向左滑动。
slide_counter：是否显示切换图片的数字。
slide_captions：是否显示图片标题。
slide_interval：图片切换间隔时间（毫秒）
slides：所切换的图片集合，包括图片地址image，图片标题title，图片链接url。
autoplay：是否自动播放。
transition_speed：切换速度，默认750。
keyboard_nav：是否支持键盘操作切换。
random：是否随机切换图片

使用

1.  引入 jquery.js 、jquery-ui.custom.min.js 和 supersized.js 文件

2.  HTML

<!--Loading display while images load-->
<div id="loading"></div>

<!--Slides-->
<div id="supersize">
  <a href="#"><img src="images/bird.jpg" title="Bird On A Branch"/></a>
  <a href="#"><img src="images/paradise.jpg" title="Paradise Lost"/></a>
  <a href="#"><img src="images/snake.jpg" title="Morelia Viridis"/></a>
</div>

<!--Content area that hovers on top-->
<div id="content">
  <div id="contentframe">
    <div id="slidecounter">
    <!--Slide counter-->
    <span></span>/<span></span>
    <!-- #slidecounter -->
  </div>
  
  <div id="slidecaption">
    浏览器中全屏显示图片「supersized」
    <!--Slide captions displayed here-->
  </div>
  
  <!--Navigation-->
  <div id="navigation">
    <a href="#" id="prevslide"><img src="images/back_dull.gif"/></a>
    <a href="#" id="pauseplay"><img src="images/pause_dull.gif"/></a>
    <a href="#" id="nextslide"><img src="images/forward_dull.gif"/></a>
    <!-- #navigation -->
  </div>
  
  <!-- #contentframe -->
</div>
<!-- #content -->

[css]
<style>
* {margin:0;padding:0;}
a {color:#8FC2FF;text-decoration: none;outline: none;}
a:hover {text-decoration: underline;}img {border:none;}
body {overflow:hidden;/*Needed to eliminate scrollbars*/background:#000;}
#content {margin:0px auto;height:100px;width:100%;bottom:5%;z-index: 3;background:#262626 no-repeat 90%;border-top:1px solid #000;border-bottom:1px solid #4F4F4F;position:absolute;}
#contentframe {overflow: hidden;border-top:solid 1px #4F4F4F;border-bottom:1px solid #000;height: 100%;text-align:left;z-index: 3;}
#slidecounter {float:left;color:#4F4F4F;font:50px "Helvetica Neue", Arial, sans-serif;font-weight:bold;margin:18px 20px;}
#slidecaption {overflow: hidden;float:left;color:#FFF;font:26px "Helvetica Neue", Arial, sans-serif;font-weight:bold;margin:33px 0;}

/*Supersized Stamp*/
.stamp {float: right;margin: 25px 20px 0 0;}

/*Supersize Plugin Styles*/
#navigation {background: url('images/navbg.gif') no-repeat;float: right;margin:22px 20px 0 0;}
#loading {position: absolute;top: 49.5%;left: 49.5%;z-index: 3;width: 24px;height: 24px;text-indent: -999em;background-image: url(images/progress.gif);}
#supersize {position:fixed;}
#supersize img, #supersize a {height:100%;width:100%;position:absolute;z-index: 0;}
#supersize .prevslide, #supersize .prevslide img {z-index: 1;}
#supersize .activeslide, #supersize .activeslide img {z-index: 2;}
</style>
[/css]

3.  调用

<script type="text/javascript">
  $(function () {
    $.fn.supersized.options = {
      startwidth: 640,
      startheight: 480,
      vertical_center: 1,
      slideshow: 1,
      navigation: 1,
      transition: 3, 
      //0-None, 1-Fade, 2-slide top, 3-slide right, 4-slide bottom, 5-slide
      leftpause_hover: 0,
      slide_counter: 1,
      slide_captions: 0,
      slide_interval: 5000
    };
    $('#supersize').supersized();
  });
</script>

相关链接

GitHub 地址 ：https://github.com/buildinternet/supersized