先上最終效果圖：
 

方法很簡單，需要修改的代碼很少：

1、打開templates/default/下的index.html.php文件，找到如下代碼：

<div id="focus_turn"> 
<!--{if !empty($_SBLOCK['hotnewspic'])}--> 
<ul id="focus_pic"> 
<!--{eval $j = 0}--> 
<!--{loop $_SBLOCK['hotnewspic'] $pkey $pvalue}--> 
<!--{eval $pcurrent = ($j == 0 ? 'current' : 'normal');}--> 
<li class="$pcurrent"><a href="$pvalue[url]"><img src="$pvalue['a_filepath']" alt="" /></a></li> 
<!--{eval $j++}--> 
<!--{/loop}--> 
</ul> 
<ul id="focus_tx"> 
<!--{eval $i = 0}--> 
<!--{loop $_SBLOCK['hotnewspic'] $key $value}--> 
<!--{eval $current = ($i == 0 ? 'current' : 'normal');}--> 
<li class="$current"><a href="$value[url]" title="$value[subjectall]">$value[subject]</a></li> 
<!--{eval $i++}--> 
<!--{/loop}--> 
</ul> 
<div id="focus_opacity"></div> 
<!--{/if}--> 
</div><!--focus_turn end--> 

（說明：控制輪轉圖的代碼，這個大家都知道）

2、把上面代碼中的

<div id="focus_opacity"></div> 

移動到上面代碼中的

<ul id="focus_tx"> 
<!--{eval $i = 0}--> 
<!--{loop $_SBLOCK['hotnewspic'] $key $value}--> 
<!--{eval $current = ($i == 0 ? 'current' : 'normal');}--> 
<li class="$current"><a href="$value[url]" title="$value[subjectall]">$value[subject]</a></li> 
<!--{eval $i++}--> 
<!--{/loop}--> 
</ul> 

的上面，即<ul id="focus_tx">的上面。
（說明：focus_opacity是控制默認輪轉圖的底部白色透明條的，因為要把底部文字說明（即focus_tx）放在白色透明條的上方，所以先移動下順序，如果不移動會造成文字說明被白色透明條遮�。�

3、修改
#focus_tx { height:20px; overflow:hidden; margin:5px 0 0 12px; font-size:14px; line-height:20px; }
中的
margin:5px 0 0 12px;
為
margin:-40px 0 0 12px;

主要是修改了距頂的位置（-40px），具體數值大小，需要自己適當調整。（說明：通過把底部說明文字的距頂數值改為負值，把底部說明文字移動白色透明條的同樣高度。）

4、修改好上面的，刷新后發現錯位，別急，接下來打開CSS文件（templates/default/css/目錄下）common.css，找到如下代碼：

#focus_tx { height:20px; overflow:hidden; margin:5px 0 0 12px; font-size:14px; line-height:20px; }
在其中間添加
position:absolute;

（說明：現在正常了，但白色透明條的顏色太淡，不協調。繼續往下看。）

5、然后繼續在css文件中查找到
#focus_opacity {  position:absolute; left:14px; bottom:41px; width:350px; height:24px; background:#FFF; opacity:0.4; filter:alpha(opacity=40); }
修改背景色為黑色，即修改
background:#FFF;
中的#FFF為#000。
（說明：換個黑色的背景，讓文字更突出。修改背景色的時候，你也可以修改為其他顏色，同時還可以通過修改
filter:alpha(opacity=40);
中的值（即那個opacity=40）來控制其透明度，數值范圍為0~100。）

6、刷新下看看效果，文字不明顯了，這是因為文字的顏色和背景色一樣造成的，接下來在CSS文件中找到
#focus_tx { height:20px; overflow:hidden; margin:5px 0 0 12px; font-size:14px; line-height:20px; }
#focus_tx .normal { display:none; }
在“#focus_tx"和"#focus_tx .normal”中間添加一段CSS代碼
#focus_tx a { color:#FFF; }
如果想讓這部分文字加粗或是字號增大/減小，可以在
#focus_tx a { color:#FFF; }
中添加font-weight:700;（文字粗體）和font-size:14px;（字號大�。�，具體的數值調整自己喜歡為止。

其他：
修改圖片序號（即上圖中的1、2、3）的背景顏色、文字顏色、和邊框顏色的方法：

修改邊框顏色、樣式：
1、修改
#focus_btn span { display:block; float:left; overflow:hidden; width:22px; height:22px; margin:0 0 0 -1px; border:1px solid #D8D8D8; text-align:center; font:14px Arial, Helvetica, sans-serif; font-weight:700; line-height:22px; cursor:pointer; }
中的background的值控制背景色，color控制文字顏色。

3、修改未選中圖片的序號的背景顏色和文字顏色的方法同上，修改的代碼是
#focus_btn .normal { background:#FFF; color:#1A4963; }

查看更多 supesite教程  supesite模板