HBCMS模板制作系列教程第十讲：幻灯片代码

今天终于有空写下教程了。好了，闲言不多说了，开始进入教程，今天讲幻灯片的制作。

接着上一讲，往下看代码，那一大段的JS代码就是幻灯片代码，由于此代码所用的SWF文件没有下载下来，我们就用另外一个代码来替代。以前我修改了一个FLASH幻灯片代码，我们直接用这段代码：

<script type="text/javascript">
<{assign var="js_num" value="6"}>
var imgUrl= new Array(<{$js_num}>);
var imgLink= new Array(<{$js_num}>);
var imgtext= new Array(<{$js_num}>);
<{assign var="type_num" value="0"}>
<{foreach name=commend_article_data item=item_info from=$data_ary.commend_article.0}>
<{if $item_info.icon_url != '' && $type_num <= $js_num }>
imgUrl[<{$type_num}>]="<{$item_info.icon_url|replace:"small":"big"}>"
imgLink[<{$type_num}>]="<{$item_info.url}>"
imgtext[<{$type_num}>]="<{$item_info.title|cn_truncate:11:"":true}>"
<{assign var="type_num" value="`$type_num+1`"}>
<{/if}>
<{/foreach}>
var pics=imgUrl[0];
var links=imgLink[0];
var texts=imgtext[0];
var focus_width=266
var focus_height=232
var text_height=20
var swf_height = focus_height+text_height;
for(var i=1;i<=<{$js_num-1}>;i++){
 pics=pics+"|"+imgUrl[i]
 links=links+"|"+imgLink[i]
 texts=texts+"|"+imgtext[i]
}
document.write('<object classid="clsid:D27CDB6E-AE6D-11cf-96B8-444553540000" id=scriptmain name=scriptmain codebase="http://download.macromedia.com/pub/shockwave/cabs/flash/swflash.cab#version=6,0,29,0" width="'+ focus_width +'" height="'+ swf_height +'"> <param name="movie" value=http://www.fxmoban.com/cms/e9/"<{$web.img_dir}>/pixviewer.swf"> <param name="quality" value="high"> <param name="FlashVars" value="bcastr_flie='+pics+'&bcastr_link='+links+'&bcastr_title='+texts+'&autoPlayTime=3&titlebgalpha=45&titlebgcolor=0x0466B1&titleplace=br&titlesize=35"><embed src=http://www.fxmoban.com/cms/e9/"<{$web.img_dir}>/pixviewer.swf" wmode="opaque" FlashVars="bcastr_flie='+pics+'&bcastr_link='+links+'&bcastr_title='+texts+'&autoPlayTime=3&titlebgalpha=45&titlebgcolor=0x0466B1&titleplace=br&titlesize=35" menu="false" bgcolor="#ffffff" quality="high" width="'+ focus_width +'" height="'+ swf_height +'" allowScriptAccess="sameDomain" type="application/x-shockwave-flash" pluginspage="http://www.macromedia.com/go/getflashplayer"></object>');
</script>

我们用这段代码覆盖掉原先的DEDECMS的幻灯代码，我们查看下DEDECMS首页模板的幻灯宽度和高度，然后修改HBCMS模板中的幻灯片高度和宽度。

下面我们简单讲下此幻灯代码，从第二行开始是我们修改的代码，第二行是确认变量js_num的最大值，第三行到第五行分别是变量js_num的值赋于幻灯片变量，如图片地址，图片链接地址，图片标题的数量。再往下就是HBCMS的文章调用代码了，你可以调用最新，热门和推荐文章，第六行是确认此循环的次数，第七行是调用推荐文章，第八行就是调用有图片的文章和确认循环次数小于或等于变量js_num。再往下三行，是图片的地址，图片的链接地址和图片的标题，具体解释可参考其它教程文章。接着往下一行，就是循环次数的变量，每次循环变量type_num加1。

由于要调用图片文章，我们添加几个带图片的文章，然后看看演示。注意：为确保幻灯代码能调用到图片文章，添加文章时，要确保勾选自动提取第一张图片为文章图标(缩略图)。由于幻灯代码调用的是六篇文章，我们就添加六篇图片文章。还有，别忘记把幻灯所需要用到的SWF文件复制到HBCMS模板的图片文件夹中。

好，添加完成后，就可以看演示了。如图所示：

今天就讲这些吧，近些时有些忙，没办法，为了生活!