SS7.0测试版之BBS相当不错的幻灯片，全代码复制即可使用

熬夜转风格，不小心看见用测试版时的风格，就把这个幻灯片给折了下来，现在我也用到我八卦频道去了，呵呵，帖出来，有喜欢的就拿去用，这是官方默认代码，我只是修改了大小。

小建议：你可以设置调用指定的图片，比如精华I 。然后，把你想要在这个幻灯片显示出图片的资讯设置精华I，同时制作合适的图片，并在发布资讯时，将要显示在这个幻灯片里的图片作为第一张上传，

1. 
   
2. 模板中写入
   
3. 
   
4. <div class="col410">
   
5.                 <div id="supehot">
   
6.                         <!--{block name="spacenews" parameter="haveattach/2/order/i.dateline DESC/limit/0,4/cachetime/83400/subjectlen/40/subjectdot/1/cachename/hotnewspic"}-->
   
7.                         <div class="box_l" id="index_focus_turn">
   
8.                                 <!--{if !empty($_SBLOCK['hotnewspic'])}-->
   
9.                                 <div id="index_focus_turn_pic">
   
10.                                         <div id="index_focus_turn_picList" style="left:0; top:0;">
    
11.                                                 <ul>
    
12.                                                         <!--{loop $_SBLOCK['hotnewspic'] $pkey $pvalue}-->
    
13.                                                         <li><a href="$pvalue[url]"><img src="$pvalue['a_filepath']" alt="" /></a></li>
    
14.                                                         <!--{/loop}-->
    
15.                                                 </ul>
    
16.                                         </div>
    
17.                                         <div id="index_focus_turn_opvdiv"></div>
    
18.                                         <div id="index_focus_turn_tx">
    
19.                                                 <ul>
    
20.                                                 <!--{eval $i = 0}-->
    
21.                                                 <!--{loop $_SBLOCK['hotnewspic'] $key $value}-->
    
22.                                                         <!--{eval $current = ($i == 0 ? 'current' : 'normal');}-->
    
23.                                                         <li class="$current">$value[subject]</li>
    
24.                                                         <!--{eval $i++}-->
    
25.                                                 <!--{/loop}-->
    
26.                                                 </ul>
    
27.                                         </div>
    
28.                                 </div>
    
29.                                 <div id="index_focus_turn_btn">
    
30.                                         <ul>
    
31.                                                 <!--{eval $i = 0}-->
    
32.                                                 <!--{loop $_SBLOCK['hotnewspic'] $bkey $bvalue}-->
    
33.                                                 <!--{eval $current = ($i == 0 ? 'current' : 'normal');}-->
    
34.                                                 <li class="$current"><img src="$bvalue[a_thumbpath]" alt="" /></li>
    
35.                                                 <!--{eval $i++}-->
    
36.                                                 <!--{/loop}-->
    
37.                                         </ul>
    
38.                                 </div>
    
39.                                 <!--{/if}-->
    
40.                         </div>
    
41.                 </div>
    
42. </div><!--col410-->

复制代码

以下CSS属性代码，复制到CSS文件的最底部，注意，是最底部，防止CSS属性冲突。

1. 
   
2. CSS样式：
   
3. 
   
4. 
   
5. #index_focus_turn { border:1px solid #DEDEDE; background:#F8F8F8; }
   
6.         #index_focus_turn_pic { display:inline; position:relative; float:left; width:470px; height:225px; overflow:hidden; margin:10px 0 0 10px; }
   
7.                 #index_focus_turn_picList { position:absolute; }
   
8.                 #index_focus_turn_picList li { width:470px; height:225px; overflow:hidden; }
   
9.                 #index_focus_turn_picList img { width: expression(470 / this.width * this.height > 225 ? 470 : this.width * 225 / this.height);  max-width: 410px; min-width: 410px;}
   
10.         #index_focus_turn_btn { display:inline; float:right; width:91px; margin:9px 9px 0 0; }
    
11.                 #index_focus_turn_btn li { width:91px; height:57px; cursor:pointer; filter:alpha(opacity=50); -moz-opacity:0.5; opacity:0.5; }
    
12.                 #index_focus_turn_btn img { width:75px; height:45px; margin:7px 0 0 11px; }
    
13.                 #index_focus_turn_btn .current { background:url(../images/focus_trun_btnbg.gif) no-repeat; filter:alpha(opacity=100); -moz-opacity:1.0; opacity:1.0; }
    
14.         #index_focus_turn_opvdiv { position:absolute; left:0; bottom:0; width:470px; height:25px; background:#fff; filter:alpha(opacity=50); -moz-opacity:0.5; opacity:0.5; }
    
15.         #index_focus_turn_tx { position:absolute; left:8px; bottom:2px; color:#000; }
    
16.                 #index_focus_turn_tx span { font-size:12px !important; }
    
17.                 #index_focus_turn_tx .normal { display:none; }
    
18.                 .column{ border:0px # solid}
    
19. .col410{ width:583px; overflow:hidden; float:left;}

复制代码

图片不动，是忘了JS了，把JS放进去就可以了

1. function addLoadEvent(func){
   
2.         var oldonload = window.onload;
   
3.         if (typeof window.onload != 'function') {
   
4.                 window.onload = func;
   
5.         } else {
   
6.                 window.onload = function(){
   
7.                         oldonload();
   
8.                         func();
   
9.                 }
   
10.         }
    
11. }
    
12. 
    
13. function moveElement(elementID,final_x,final_y,interval) {
    
14.   if (!document.getElementById) return false;
    
15.   if (!document.getElementById(elementID)) return false;
    
16.   var elem = document.getElementById(elementID);
    
17.   if (elem.movement) {
    
18.     clearTimeout(elem.movement);
    
19.   }
    
20.   if (!elem.style.left) {
    
21.     elem.style.left = "0px";
    
22.   }
    
23.   if (!elem.style.top) {
    
24.     elem.style.top = "0px";
    
25.   }
    
26.   var xpos = parseInt(elem.style.left);
    
27.   var ypos = parseInt(elem.style.top);
    
28.   if (xpos == final_x && ypos == final_y) {
    
29.                 return true;
    
30.   }
    
31.   if (xpos < final_x) {
    
32.     var dist = Math.ceil((final_x - xpos)/2);
    
33.     xpos = xpos + dist;
    
34.   }
    
35.   if (xpos > final_x) {
    
36.     var dist = Math.ceil((xpos - final_x)/2);
    
37.     xpos = xpos - dist;
    
38.   }
    
39.   if (ypos < final_y) {
    
40.     var dist = Math.ceil((final_y - ypos)/2);
    
41.     ypos = ypos + dist;
    
42.   }
    
43.   if (ypos > final_y) {
    
44.     var dist = Math.ceil((ypos - final_y)/2);
    
45.     ypos = ypos - dist;
    
46.   }
    
47.   elem.style.left = xpos + "px";
    
48.   elem.style.top = ypos + "px";
    
49.   var repeat = "moveElement('"+elementID+"',"+final_x+","+final_y+","+interval+")";
    
50.   elem.movement = setTimeout(repeat,interval);
    
51. }
    
52. 
    
53. function classNormal(focus_turn_btn,focus_turn_tx){
    
54.         var focusBtnList = $(focus_turn_btn).getElementsByTagName('li');
    
55.         var focusTxList = $(focus_turn_tx).getElementsByTagName('li');
    
56.         for(var i=0; i<focusBtnList.length; i++) {
    
57.                 focusBtnList[i].className='normal';
    
58.                 focusTxList[i].className='normal';
    
59.         }
    
60. }
    
61. 
    
62. function classCurrent(focus_turn_btn,focus_turn_tx,n){
    
63.         var focusBtnList = $(focus_turn_btn).getElementsByTagName('li');
    
64.         var focusTxList = $(focus_turn_tx).getElementsByTagName('li');
    
65.         focusBtnList[n].className='current';
    
66.         focusTxList[n].className='current';
    
67. }
    
68. 
    
69. function newsfocusChange() {
    
70.         if(!$('news_focus_turn')||!$('news_focus_turn_btn')) return;
    
71.         $('news_focus_turn').onmouseover = function(){atuokey = true};
    
72.         $('news_focus_turn').onmouseout = function(){atuokey = false};
    
73.         var focusBtnList = $('news_focus_turn_btn').getElementsByTagName('li');
    
74.         if(!focusBtnList||focusBtnList.length==0) return;
    
75.         var listLength = focusBtnList.length;
    
76.                 focusBtnList[0].onmouseover = function() {
    
77.                         moveElement('news_focus_turn_picList',0,0,5);
    
78.                         classNormal('news_focus_turn_btn','news_focus_turn_tx');
    
79.                         classCurrent('news_focus_turn_btn','news_focus_turn_tx',0)
    
80.                 }
    
81.         if (listLength>=2) {
    
82.                 focusBtnList[1].onmouseover = function() {
    
83.                         moveElement('news_focus_turn_picList',-400,0,5);
    
84.                         classNormal('news_focus_turn_btn','news_focus_turn_tx');
    
85.                         classCurrent('news_focus_turn_btn','news_focus_turn_tx',1)
    
86.                 }
    
87.         }
    
88.         if (listLength>=3) {
    
89.                 focusBtnList[2].onmouseover = function() {
    
90.                         moveElement('news_focus_turn_picList',-800,0,5);
    
91.                         classNormal('news_focus_turn_btn','news_focus_turn_tx');
    
92.                         classCurrent('news_focus_turn_btn','news_focus_turn_tx',2)
    
93.                 }
    
94.         }
    
95.         if (listLength>=4) {
    
96.                 focusBtnList[3].onmouseover = function() {
    
97.                         moveElement('news_focus_turn_picList',-1200,0,5);
    
98.                         classNormal('news_focus_turn_btn','news_focus_turn_tx');
    
99.                         classCurrent('news_focus_turn_btn','news_focus_turn_tx',3)
    
100.                 }
     
101.         }
     
102. }
     
103. 
     
104. setInterval('newsautoFocusChange()', 5000);
     
105. var atuokey = false;
     
106. function newsautoFocusChange() {
     
107.         if(!$('news_focus_turn_btn')) return;
     
108.         if(atuokey) return;
     
109.         var focusBtnList = $('news_focus_turn_btn').getElementsByTagName('li');
     
110.         var listLength = focusBtnList.length;
     
111.         for(var i=0; i<focusBtnList.length; i++) {
     
112.                 if (focusBtnList[i].className == 'current') var currentNum = i;
     
113.         }
     
114.         if (currentNum==0&&listLength!=1 ){
     
115.                 moveElement('news_focus_turn_picList',-400,0,5);
     
116.                 classNormal('news_focus_turn_btn','news_focus_turn_tx');
     
117.                 classCurrent('news_focus_turn_btn','news_focus_turn_tx',1)
     
118.         }
     
119.         if (currentNum==1&&listLength!=2 ){
     
120.                 moveElement('news_focus_turn_picList',-800,0,5);
     
121.                 classNormal('news_focus_turn_btn','news_focus_turn_tx');
     
122.                 classCurrent('news_focus_turn_btn','news_focus_turn_tx',2)
     
123.         }
     
124.         if (currentNum==2&&listLength!=3 ){
     
125.                 moveElement('news_focus_turn_picList',-1200,0,5);
     
126.                 classNormal('news_focus_turn_btn','news_focus_turn_tx');
     
127.                 classCurrent('news_focus_turn_btn','news_focus_turn_tx',3)
     
128.         }
     
129.         if (currentNum==3){
     
130.                 moveElement('news_focus_turn_picList',0,0,5);
     
131.                 classNormal('news_focus_turn_btn','news_focus_turn_tx');
     
132.                 classCurrent('news_focus_turn_btn','news_focus_turn_tx',0)
     
133.         }
     
134.         if (currentNum==1&&listLength==2 ){
     
135.                 moveElement('news_focus_turn_picList',0,0,5);
     
136.                 classNormal('news_focus_turn_btn','news_focus_turn_tx');
     
137.                 classCurrent('news_focus_turn_btn','news_focus_turn_tx',0)
     
138.         }
     
139.         if (currentNum==2&&listLength==3 ){
     
140.                 moveElement('news_focus_turn_picList',0,0,5);
     
141.                 classNormal('news_focus_turn_btn','news_focus_turn_tx');
     
142.                 classCurrent('news_focus_turn_btn','news_focus_turn_tx',0)
     
143.         }
     
144. }
     
145. 
     
146. function indexfocusChange() {
     
147.         if(!$('index_focus_turn')||!$('index_focus_turn_btn')) return;
     
148.         $('index_focus_turn').onmouseover = function(){atuokey = true};
     
149.         $('index_focus_turn').onmouseout = function(){atuokey = false};
     
150.         var focusBtnList = $('index_focus_turn_btn').getElementsByTagName('li');
     
151.         if(!focusBtnList||focusBtnList.length==0) return;
     
152.         var listLength = focusBtnList.length;
     
153.                 focusBtnList[0].onmouseover = function() {
     
154.                         moveElement('index_focus_turn_picList',0,0,5);
     
155.                         classNormal('index_focus_turn_btn','index_focus_turn_tx');
     
156.                         classCurrent('index_focus_turn_btn','index_focus_turn_tx',0);
     
157.                 }
     
158.         if (listLength>=2) {
     
159.                 focusBtnList[1].onmouseover = function() {
     
160.                         moveElement('index_focus_turn_picList',0,-225,5);
     
161.                         classNormal('index_focus_turn_btn','index_focus_turn_tx');
     
162.                         classCurrent('index_focus_turn_btn','index_focus_turn_tx',1);
     
163.                 }
     
164.         }
     
165.         if (listLength>=3) {
     
166.                 focusBtnList[2].onmouseover = function() {
     
167.                         moveElement('index_focus_turn_picList',0,-450,5);
     
168.                         classNormal('index_focus_turn_btn','index_focus_turn_tx');
     
169.                         classCurrent('index_focus_turn_btn','index_focus_turn_tx',2);
     
170.                 }
     
171.         }
     
172.         if (listLength>=4) {
     
173.                 focusBtnList[3].onmouseover = function() {
     
174.                         moveElement('index_focus_turn_picList',0,-675,5);
     
175.                         classNormal('index_focus_turn_btn','index_focus_turn_tx');
     
176.                         classCurrent('index_focus_turn_btn','index_focus_turn_tx',3);
     
177.                 }
     
178.         }
     
179. }
     
180. 
     
181. setInterval('indexautoFocusChange()',5000);
     
182. var atuokey = false;
     
183. function indexautoFocusChange() {
     
184.         if(!$('index_focus_turn')||!$('index_focus_turn_btn')) return;
     
185.         if(atuokey) return;
     
186.         var focusBtnList = $('index_focus_turn_btn').getElementsByTagName('li');
     
187.         var listLength = focusBtnList.length;
     
188.         for(var i=0; i<listLength; i++) {
     
189.                 if (focusBtnList[i].className == 'current') var currentNum = i;
     
190.         }
     
191.         if (currentNum==0&&listLength!=1 ){
     
192.                 moveElement('index_focus_turn_picList',0,-225,5);
     
193.                 classNormal('index_focus_turn_btn','index_focus_turn_tx');
     
194.                 classCurrent('index_focus_turn_btn','index_focus_turn_tx',1);
     
195.         }
     
196.         if (currentNum==1&&listLength!=2 ){
     
197.                 moveElement('index_focus_turn_picList',0,-450,5);
     
198.                 classNormal('index_focus_turn_btn','index_focus_turn_tx');
     
199.                 classCurrent('index_focus_turn_btn','index_focus_turn_tx',2);
     
200.         }
     
201.         if (currentNum==2&&listLength!=3 ){
     
202.                 moveElement('index_focus_turn_picList',0,-675,5);
     
203.                 classNormal('index_focus_turn_btn','index_focus_turn_tx');
     
204.                 classCurrent('index_focus_turn_btn','index_focus_turn_tx',3);
     
205.         }
     
206.         if (currentNum==3 ){
     
207.                 moveElement('index_focus_turn_picList',0,0,5);
     
208.                 classNormal('index_focus_turn_btn','index_focus_turn_tx');
     
209.                 classCurrent('index_focus_turn_btn','index_focus_turn_tx',0);
     
210.         }
     
211.         if (currentNum==1&&listLength==2 ){
     
212.                 moveElement('index_focus_turn_picList',0,0,5);
     
213.                 classNormal('index_focus_turn_btn','index_focus_turn_tx');
     
214.                 classCurrent('index_focus_turn_btn','index_focus_turn_tx',0);
     
215.         }
     
216.         if (currentNum==2&&listLength==3 ){
     
217.                 moveElement('index_focus_turn_picList',0,0,5);
     
218.                 classNormal('index_focus_turn_btn','index_focus_turn_tx');
     
219.                 classCurrent('index_focus_turn_btn','index_focus_turn_tx',0);
     
220.         }
     
221. }
     
222. addLoadEvent(newsfocusChange);
     
223. addLoadEvent(indexfocusChange);

复制代码

不行啊，图片不动~~

这样的幻灯，一般都需要手工加信息的，否则会变形影响美观的

小建议：你可以设置调用指定的图片，比如精华I 。然后，把你想要在这个幻灯片显示出图片的资讯设置精华I，同时制作合适的图片，并在发布资讯时，将要显示在这个幻灯片里的图片作为第一张上传，

做风格就是搞不清楚 这个幻灯片调用的问题！
有些汗颜！

到底怎么做？
这个JS 放在哪儿？放在另外一个文件夹吗？

还有那个幻灯片很漂亮如果我要幻灯片右侧的四个小图片 在幻灯片下面显示呢？而不是右侧呢？怎么修改

这样的幻灯，一般都需要手工加信息的，否则会变形影响美观的
Gnagno 发表于 2009-11-20 07:16

    ((em:14)) ((em:14))

顶起来~希望官方做个精美的幻灯片~

复杂哦..........

不想用幻灯片了，不过还是要支持一下！这个幻灯片很漂亮！

JS 放在模板中就行。另外，用审核级别调用图片也不错。

回复 7# jiangxiaoli

看看这个
   
https://discuz.dismall.com/thread-1488592-1-1.html