最新消息:

第17款插件:supersized.js 在浏览器中全屏显示图片插件

图片幻灯插件 杨红伟 8981浏览 0评论

描述:Supersized 是一款功能强大的图片切换插件,支持等比例缩放图片填充成全屏效果,支持滑动和淡入淡出等多种动画切换效果。
兼容浏览器:IE6-9/Firefox/Google chrome
官方链接:http://buildinternet.com/project/supersized
JS下载: http://www.ijquery.cn/js/supersized.2.0.js
预览: http://www.ijquery.cn/study/demo/supersized
打包下载: http://www.ijquery.cn/study/demo/supersized/supersized.zip
参数说明:

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:是否随机切换图片

图片展示:

11

JS引用代码:
注:没有jquery-ui-1.7.2.custom.min.js虽然全屏,但不滚动,所以是必需的!

[js]

<script type="text/javascript" charset="utf-8" src="http://www.ijquery.cn/js/jquery-1.3.2.min.js"></script>
<script type="text/javascript" charset="utf-8" src="http://www.ijquery.cn/js/jquery-ui-1.7.2.custom.min.js"></script>
<script type="text/javascript" charset="utf-8" src="http://www.ijquery.cn/js/supersized.2.0.js"></script>
<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 left
pause_hover: 0,
slide_counter: 1,
slide_captions: 0,
slide_interval: 5000
};
$('#supersize').supersized();
});
</script>

[/js]

 

HTML代码:

[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>
</div>
<!-- #content -->

[/html]

 

CSS代码:

[css]<link rel="stylesheet" type="text/css" href="css/style.css" media="all" />[/css]

完整代码如下:

[css]
* {
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;
}

[/css]

发表我的评论
取消评论
表情

Hi,您需要填写昵称和邮箱!

  • 昵称 (必填)
  • 邮箱 (必填)
  • 网址