首页 » 二次开源 » phpcms v9 建站 » 正文

phpcms v9 调用默认模板轮播器



在用phpcms v9建设网站的时候,可能我们会需要用到phpcms v9自带的轮播器。接下来我就来讲一下调用的方法和步骤,希望能对你的学习有所帮助。

第一步。打开header.html
复制
<script type=”text/javascript” src=”{JS_PATH}jquery.min.js”></script>
<script type=”text/javascript” src=”{JS_PATH}jquery.sgallery.js”></script>
到自己的页面底部,调用这两个文件。

第二步。打开index.html
找到代码
<div class=”FocusPic”>
{pc:content  action=”position” posid=”1″  order=”listorder DESC” thumb=”1″ num=”5″}
<div class=”content” id=”main-slide”>
<div class=”changeDiv”>
{loop $data $r}
<a href=”{$r[‘url’]}” title=”{str_cut($r[‘title’],30)}”><img src=”{thumb($r[‘thumb’],310,260)}” alt=”{$r[‘title’]}” width=”310″ height=”260″ /></a>
{/loop}
</div>
</div>
{/pc}
</div>
复制粘贴至自己想要放置的位置。

第三步。index.html页面拉到页面底部
找到一段js代码,
<script type=”text/javascript”>
$(function(){
new slide(“#main-slide”,”cur”,310,260,1);//焦点图
new SwapTab(“.SwapTab”,”span”,”.tab-content”,”ul”,”fb”);//排行TAB
})
</script>
同样复制粘贴至自己页面的底部位置。

第四步。打开默认css的default_blue.css文件
找到默认幻灯片的css代码。
/* 默认幻灯片 */
.FocusPic{zoom:1;position:relative; overflow:hidden}
.FocusPic .content{overflow:hidden}
.FocusPic .changeDiv a{position:absolute;top:0px;left:0px;display:none;}
.FocusPic .title-bg,.FocusPic .title{position:absolute;left:0px;bottom:0;width:434px;height:30px;line-height:30px;overflow:hidden}
.FocusPic .title-bg{background:#000;filter:alpha(opacity=50);opacity:0.5;}
.FocusPic .title a{display:block;padding-left:15px;color:#fff; font-size:14px;}
.FocusPic .change{bottom:4px;height:20px;right:3px;*right:5px;_right:4px;position:absolute;text-align:right;z-index:9999;}
.FocusPic .change i {background:#666;color:#FFF;cursor:pointer;font-family:Arial;font-size:12px;line-height:15px;margin-right:2px;padding:2px 6px; font-style:normal; height:15px;display:inline-block;display:-moz-inline-stack;zoom:1;*display:inline;}
.FocusPic .change i.cur {background:#FF7700;}
复制粘贴至自己的css文件

第五步。打开pc后台
将某一栏目带有略缩图的文章发布时勾选上底部的“首页焦点图推荐”。保存。

注:如果想控制调用指定ID栏目和修改幻灯显示的数目等,可以在上面第二步骤的代码
{pc:content action=”position” posid=”1″ order=”listorder DESC” thumb=”1″ num=”5″}
进行修改。 其中posid表示栏目id,num表示幻灯图数目,对后面的数字进行修改即可。

第六步。后台生成首页、更新缓存,刷新前台页面。

出来效果了吗?