建站资源下载详情
为您免费提供多种建站资源下载,包括网站模板下载、前端插件下载和字体下载!您只需注册为会员即可任意下载!

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

来源:易助科技网浏览量:10收藏

简介


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

(下载的附件中带有DEMO)


JQuery图片切换全屏显示插件Supersized-示例图



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