SS默认焦点轮转图简单美化方法！

先上最终效果图：


方法很简单，需要修改的代码很少：

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

1. 
   
2. <div id="focus_turn">
   
3. <!--{if !empty($_SBLOCK['hotnewspic'])}-->
   
4. <ul id="focus_pic">
   
5. <!--{eval $j = 0}-->
   
6. <!--{loop $_SBLOCK['hotnewspic'] $pkey $pvalue}-->
   
7. <!--{eval $pcurrent = ($j == 0 ? 'current' : 'normal');}-->
   
8. <li class="$pcurrent"><a href="$pvalue[url]"><img src="$pvalue['a_filepath']" alt="" /></a></li>
   
9. <!--{eval $j++}-->
   
10. <!--{/loop}-->
    
11. </ul>
    
12. <ul id="focus_tx">
    
13. <!--{eval $i = 0}-->
    
14. <!--{loop $_SBLOCK['hotnewspic'] $key $value}-->
    
15. <!--{eval $current = ($i == 0 ? 'current' : 'normal');}-->
    
16. <li class="$current"><a href="$value[url]" title="$value[subjectall]">$value[subject]</a></li>
    
17. <!--{eval $i++}-->
    
18. <!--{/loop}-->
    
19. </ul>
    
20. <div id="focus_opacity"></div>
    
21. <!--{/if}-->
    
22. </div><!--focus_turn end-->
    

复制代码

（说明：控制轮转图的代码，这个大家都知道）

2、把上面代码中的

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

复制代码

移动到上面代码中的

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

复制代码

的上面，即<ul id="focus_tx">的上面。
（说明：focus_opacity是控制默认轮转图的底部白色透明条的，因为要把底部文字说明（即focus_tx）放在白色透明条的上方，所以先移动下顺序，如果不移动会造成文字说明被白色透明条遮住）

3、修改

1. #focus_tx { height:20px; overflow:hidden; margin:5px 0 0 12px; font-size:14px; line-height:20px; }

复制代码

中的

1. margin:5px 0 0 12px;

复制代码

为

1. margin:-40px 0 0 12px;

复制代码

主要是修改了距顶的位置（-40px），具体数值大小，需要自己适当调整。（说明：通过把底部说明文字的距顶数值改为负值，把底部说明文字移动白色透明条的同样高度。）

4、修改好上面的，刷新后发现错位，别急，接下来打开CSS文件（templates/default/css/目录下）common.css，找到如下代码：

1. #focus_tx { height:20px; overflow:hidden; margin:5px 0 0 12px; font-size:14px; line-height:20px; }

复制代码

在其中间添加

1. position:absolute;

复制代码

（说明：现在正常了，但白色透明条的颜色太淡，不协调。继续往下看。）

5、然后继续在css文件中查找到

1. #focus_opacity {  position:absolute; left:14px; bottom:41px; width:350px; height:24px; background:#FFF; opacity:0.4; filter:alpha(opacity=40); }

复制代码

修改背景色为黑色，即修改

1. background:#FFF;

复制代码

中的#FFF为#000。
（说明：换个黑色的背景，让文字更突出。修改背景色的时候，你也可以修改为其他颜色，同时还可以通过修改

1. filter:alpha(opacity=40);

复制代码

中的值（即那个opacity=40）来控制其透明度，数值范围为0~100。）

6、刷新下看看效果，文字不明显了，这是因为文字的颜色和背景色一样造成的，接下来在CSS文件中找到

1. #focus_tx { height:20px; overflow:hidden; margin:5px 0 0 12px; font-size:14px; line-height:20px; }
   
2. #focus_tx .normal { display:none; }

复制代码

在“#focus_tx"和"#focus_tx .normal”中间添加一段CSS代码

1. #focus_tx a { color:#FFF; }

复制代码

如果想让这部分文字加粗或是字号增大/减小，可以在

1. #focus_tx a { color:#FFF; }

复制代码

中添加font-weight:700;（文字粗体）和font-size:14px;（字号大小），具体的数值调整自己喜欢为止。

其他：
修改图片序号（即上图中的1、2、3）的背景颜色、文字颜色、和边框颜色的方法：

修改边框颜色、样式：
1、修改

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; }

复制代码

中的border的值来控制边框颜色和样式。具体参照CSS手册。

2、修改当前图片的序号的背景颜色和文字颜色，可以修改

1. #focus_btn .current { background:#1A4963; color:#FFF; }

复制代码

中的background的值控制背景色，color控制文字颜色。

3、修改未选中图片的序号的背景颜色和文字颜色的方法同上，修改的代码是

1. #focus_btn .normal { background:#FFF; color:#1A4963; }

复制代码

咱不会那啥程序的，第一次写这个，先来点简单的。不知道有没人需要，有需要的话，再继续发点其他地方的修改方法！

上面的修改方法，因为图片序号和文字在一排上，所以在文字过长，或是图片序号过多时，他们会重叠，修改的办法是找到templates/default/目录下的index.html.php文件中的

1. <!--{block name="spacenews" parameter="haveattach/2/order/i.dateline DESC/limit/0,4/cachetime/83400/subjectlen/40/subjectdot/0/cachename/hotnewspic"}-->

复制代码

修改其中的subjectlen/40/（标题长度），把40改小点。或是修改limit/0,4/（调用数据条数），把4改小点，这个自己综合着来调整。

一般调用4挑数据，标题长度为34就可以了。

这个要支持

这个教程可以满足初级站长对图片轮换的修改要求，更重要的是给出了一种方法来修改模板。

这是个好教程，想改个很好看的焦点轮播图，却不知道怎么改...

顶顶更健康啦。支持楼主的奉献精神。

楼主很棒啊！！！！！

这个教程可以满足初级站长对图片轮换的修改要求，更重要的是给出了一种方法来修改模板。

绝对的支持。