一个简单的幻灯效果

一个朋友需要,就修改了下,本来不想再搞SS了,感觉官方太不重视了,但是看所以很需要,就帮助修改了下,同时希望官方能重视SS,还是有很多站长需要这个的.

很简单,高手别见笑

效果


第一步,
把下面代码插入你想要调用的地方

1. <link rel="stylesheet" type="text/css" href="ooosu/css.css" />
   
2. <script src="ooosu/show.js" type="text/javascript" language="javascript"></script>
   
3. <div id="p7ssm">
   
4.       <div id="p7ssm_cf">&nbsp;</div>
   
5.       <div id="p7ssm_loading"><img src="ooosu/loading.gif" alt="" width="78" height="8" /></div>
   
6.       <table id="p7ssm_fstbl" border="0" cellpadding="0" cellspacing="0" summary="Fullsize Image">
   
7.         <tr>
   
8.           <td><div id="p7ssm_fullsize">
   
9.               <div id="p7ssm_fsc">
   
10.                 <div id="p7ssm_fsw">
    
11.                   <div id="p7ssm_fsimg"><a href="javascript:;" id="p7ssm_fslink"><img src="ooosu/biaozhi.gif" alt="噢素素材（ooosu）" name="p7ssm_im" width="390" height="245" border="0" id="p7ssm_im" /></a></div>
    
12.                   <div id="p7ssm_description"></div>
    
13.                 </div>
    
14.               </div>
    
15.             </div></td>
    
16.         </tr>
    
17.       </table>
    
18.       <div id="p7SSMwhmb">
    
19.         <div id="p7ssm_thumbs">
    
20.           <div id="p7SSMwp_1">
    
21.             <div class="p7ssm_thumb_section">
    
22.               <ul><!-- 修改内容开始 -->
    
23.               <!--{block name="spacenews" parameter="haveattach/2/limit/0,5/cachetime/900/subjectlen/40/subjectdot/1/cachename/ooosu/tpl/data"}--><!--ooosu.com-->
    
24.               <!--{loop $_SBLOCK[ooosu] $value}-->
    
25.                 <li><a href="$value[a_thumbpath]">
    
26.                                 <img src="$value[a_thumbpath]" alt="$value[subject]" width="390" height="245" /></a>
    
27.                   <div class="p7ssm_lk"><a href="$value[url]">点击查看详情</a></div>
    
28.                   <div class="p7ssm_fd">$value[subject]</div>
    
29.                 </li>
    
30.                 <!--{/loop}-->
    
31.               <!-- 修改内容结束 --></ul>
    
32.               <br class="p7ssm_clearThumbs" />
    
33.             </div>
    
34.           </div>
    
35.         </div>
    
36.       </div>
    
37.       <div id="p7ssm_toolbar">
    
38.         <div class="p7ssm_sectionTrigger"><a id="p7SSMtp_1" href="#">New Image Set</a></div>
    
39.         <div id="p7ssm_dragbar" title="Move"><span>Move</span></div>
    
40.         <div id="p7ssm_preview">   
    
41.           <table summary="Thumbnail Preview">
    
42.             <tr>
    
43.               <td><img src="ooosu/biaozhi.gif" alt="噢素素材（ooosu）" /></td>
    
44.             </tr>
    
45.           </table>
    
46.         </div>
    
47.         <div id="p7ssm_tools">
    
48.           <table border="0" cellpadding="0" cellspacing="0" summary="Slideshow Toolbar">
    
49.             <tr>
    
50.               <td><div id="p7ssm_nav_wrapper"><a id="p7SSMtnav" href="#" title="Menu"><em>Navigate</em></a>
    
51.                   <div id="p7SSMwnav">
    
52.                     <div id="p7ssm_navList">
    
53.                       <ul>
    
54.                         <li></li>
    
55.                       </ul>
    
56.                     </div>
    
57.                   </div>
    
58.                 </div></td>
    
59.               <td><a href="#" title="Hide or Show Thumbnails" id="p7SSMthmb"><em>Hide Thumbs</em></a></td>
    
60.               <td><a href="#" id="p7ssm_first" title="First Image"><em>First</em></a></td>
    
61.               <td><a href="#" id="p7ssm_prev" title="Previous Image"><em>Previous</em></a></td>
    
62.               <td><a href="#" id="p7ssm_pp" class="p7ssm_pause" title="Pause"><em>Pause</em></a></td>
    
63.               <td><a href="#" id="p7ssm_next" title="Next Image"><em>Next</em></a></td>
    
64.               <td><a href="#" id="p7ssm_last" title="Last Image"><em>Last</em></a></td>
    
65.               <td><div id="p7ssm_slidechannel">
    
66.                   <div id="p7ssm_slider"><a href="#" id="p7ssm_slidebar" title="Speed:"><em>Set Speed</em></a></div>
    
67.                                   </div></td>
    
68.             </tr>
    
69.           </table>
    
70.         </div>
    
71.       </div>
    
72. <!--[if IE 7]>
    
73. <style>
    
74. #p7ssm, #p7ssm div {zoom: 1;}
    
75. </style><![endif]-->
    
76. <!--[if IE 6]><style>
    
77. #p7ssm a, #p7ssm, #p7ssm div, #p7ssm_thumb_wrapper {zoom: 1;}
    
78. .p7ssm_thumb_section {padding-right: 0; padding-left: 0;}
    
79. .p7ssm_thumb_section a {float: left;}
    
80. </style><![endif]-->
    
81. <!--[if IE 5]><style>
    
82. #p7ssm {}
    
83. .p7ssm_sectionTrigger {text-align: left;}
    
84. #p7ssm_navList li {float: left; clear:both; width: 100%;}
    
85. #p7ssm, #p7ssm_w1, #p7ssm_w2, #p7ssm_description, #p7ssm_preview,
    
86. #p7ssm_navList a, .p7ssm_sectionTrigger a, #p7ssm_thumbs,
    
87. .p7ssm_thumb_section, #p7ssm_fsw {height: 1%;}
    
88. .p7ssm_thumb_section {padding: 0;}
    
89. </style><![endif]-->
    
90. <!--[if IE 5.5000]><style>
    
91. #p7ssm, #p7ssm_w1, #p7ssm_w2 {zoom: 1;}
    
92. </style><![endif]-->
    
93. <script type="text/javascript">
    
94. <!--
    
95. P7_SSMinit(1,1,1,1,0,1,1,1,5);
    
96. //-->
    
97. </script>
    
98. </div>

复制代码

下载CSS文件和JS文件,我这个放在SS根目录,如果放在其他地方请修改上面代码的路径;
ooosu.rar (11.91 KB, 下载次数: 181)

2008-11-7 16:32 上传

点击文件名下载附件

这个调用是最新的资讯图片,大家想调用什么可随便修改调用代码即可,很简单

有问题可跟贴或者到本站提出,bbs.ooosu.com

不错，帮顶

是不错，不过代码真的不少，要仔细看看，学习精髓才是根本

我用这个替换资讯首页的那个默认幻灯片代码后，乱码啊
能不能详细说说怎么个弄法啊