WEB开发网
开发学院CMS教程其它CMS HBCMS模板制作系列教程第十讲:幻灯片代码 阅读

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

 2010-06-05 19:17:03 来源:WEB开发网   
核心提示:今天终于有空写下教程了,好了,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模板的图片文件夹中。

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

  

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

Tags:HBCMS 模板 制作

编辑录入:爽爽 [复制链接] [打 印]
赞助商链接