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

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

兼容浏览器：IE6-9/Firefox/Google chrome

官方链接：http://buildinternet.com/project/supersized 

JS下载： http://ijquery.360sites.cn/js/supersized.2.0.js

预览： http://ijquery.360sites.cn/demo/supersized

打包下载： http://ijquery.360sites.cn/demo/supersized/supersized.zip

参数说明：

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

复制代码

图片展示：


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

1. <script type="text/javascript" charset="utf-8" src="http://ijquery.360sites.cn/js/jquery-1.3.2.min.js"></script>
   
2. <script type="text/javascript" charset="utf-8" src="http://ijquery.360sites.cn/js/jquery-ui-1.7.2.custom.min.js"></script>
   
3. <script type="text/javascript" charset="utf-8" src="http://ijquery.360sites.cn/js/supersized.2.0.js"></script>
   
4. <script type="text/javascript">
   
5.         $(function () {
   
6.                 $.fn.supersized.options = {
   
7.                         startwidth: 640,
   
8.                         startheight: 480,
   
9.                         vertical_center: 1,
   
10.                         slideshow: 1,
    
11.                         navigation: 1,
    
12.                         transition: 3, //0-None, 1-Fade, 2-slide top, 3-slide right, 4-slide bottom, 5-slide left
    
13.                         pause_hover: 0,
    
14.                         slide_counter: 1,
    
15.                         slide_captions: 0,
    
16.                         slide_interval: 5000
    
17.                 };
    
18.                 $('#supersize').supersized();
    
19.         });
    
20. </script>

复制代码

HTML代码：

1. <!--Loading display while images load-->
   
2. <div id="loading"> </div>
   
3. 
   
4. <!--Slides-->
   
5. <div id="supersize">
   
6.         <a href="#"><img src="images/bird.jpg" title="Bird On A Branch"/></a>
   
7.         <a href="#"><img src="images/paradise.jpg" title="Paradise Lost"/></a>
   
8.         <a href="#"><img src="images/snake.jpg" title="Morelia Viridis"/></a>
   
9. </div>
   
10. 
    
11. <!--Content area that hovers on top-->
    
12. <div id="content">
    
13.         <div id="contentframe">
    
14.                 <div id="slidecounter"><!--Slide counter-->
    
15.                         <span class="slidenumber"></span>/<span class="totalslides"></span>
    
16.                         <!-- #slidecounter -->
    
17.                 </div>
    
18.                 
    
19.                 <div id="slidecaption">浏览器中全屏显示图片「supersized」<!--Slide captions displayed here--></div>
    
20.                 <!--Navigation-->
    
21.                 <div id="navigation">
    
22.                         <a href="#" id="prevslide"><img src="images/back_dull.gif"/></a>
    
23.                         <a href="#" id="pauseplay"><img src="images/pause_dull.gif"/></a>
    
24.                         <a href="#" id="nextslide"><img src="images/forward_dull.gif"/></a>
    
25.                         <!-- #navigation -->
    
26.                 </div>
    
27.                 
    
28.                 <!-- #contentframe -->
    
29.         </div>
    
30. </div>        
    
31. <!-- #content -->

复制代码

CSS代码：

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

复制代码

完整代码如下：

1. 
   
2. * {
   
3.         margin:0;
   
4.         padding:0;
   
5. }
   
6. 
   
7. a {
   
8.         color:#8FC2FF;
   
9.         text-decoration: none;
   
10.         outline: none;
    
11. }
    
12. 
    
13. a:hover {
    
14.         text-decoration: underline;
    
15. }
    
16. 
    
17. img {
    
18.         border:none;
    
19. }
    
20. 
    
21. body {
    
22.         overflow:hidden;/*Needed to eliminate scrollbars*/
    
23.         background:#000;
    
24. }
    
25. 
    
26. #content {
    
27.         margin:0px auto;
    
28.         height:100px;
    
29.         width:100%;
    
30.         bottom:5%;
    
31.         z-index: 3;
    
32.         background:#262626 no-repeat 90%;
    
33.         border-top:1px solid #000;
    
34.         border-bottom:1px solid #4F4F4F;
    
35.         position:absolute;
    
36. }
    
37. 
    
38. #contentframe {
    
39.         overflow: hidden;
    
40.         border-top:solid 1px #4F4F4F;
    
41.         border-bottom:1px solid #000;
    
42.         height: 100%;
    
43.         text-align:left;
    
44.         z-index: 3;
    
45. }
    
46. 
    
47. #slidecounter {
    
48.         float:left;
    
49.         color:#4F4F4F;
    
50.         font:50px "Helvetica Neue", Arial, sans-serif;
    
51.         font-weight:bold;
    
52.         margin:18px 20px;        
    
53. }
    
54. 
    
55. #slidecaption {
    
56.         overflow: hidden;
    
57.         float:left;
    
58.         color:#FFF;
    
59.         font:26px "Helvetica Neue", Arial, sans-serif;
    
60.         font-weight:bold;
    
61.         margin:33px 0;
    
62. }
    
63. 
    
64. /*Supersized Stamp*/
    
65. .stamp {
    
66.         float: right;
    
67.         margin: 25px 20px 0 0;
    
68. }
    
69. 
    
70. /*Supersize Plugin Styles*/
    
71. #navigation {
    
72.         background: url('images/navbg.gif') no-repeat;
    
73.         float: right;
    
74.         margin:22px 20px 0 0;
    
75. }
    
76. 
    
77. #loading {
    
78.         position: absolute;
    
79.         top: 49.5%; 
    
80.         left: 49.5%;
    
81.         z-index: 3;
    
82.         width: 24px; 
    
83.         height: 24px;
    
84.         text-indent: -999em;
    
85.         background-image: url(images/progress.gif);
    
86. }
    
87. 
    
88. #supersize {
    
89.         position:fixed;
    
90. }
    
91. 
    
92. #supersize img, #supersize a {
    
93.         height:100%;
    
94.         width:100%;
    
95.         position:absolute;
    
96.         z-index: 0;
    
97. }
    
98. 
    
99. #supersize .prevslide, #supersize .prevslide img {
    
100.         z-index: 1;
     
101. }
     
102. 
     
103. #supersize .activeslide, #supersize .activeslide img {
     
104.         z-index: 2;
     
105. }
     

复制代码

[转] http://ijquery.360sites.cn/forum.php?mod=viewthread&tid=17